Klokbeker Puzzel 5×5 – Slepen<\/title>\n<style>\nbody { font-family: Arial, sans-serif; text-align:center; margin:0; background:#fff; }\nh2 { color:#4a4036; padding:15px; }\n#controls { margin:20px; }\nbutton { padding:10px 20px; font-size:16px; background:#6b5b4b; color:white; border:none; cursor:pointer; }\nbutton:hover { background:#8b7765; }\n\n#puzzle-container {\n width:500px; height:500px; margin:20px auto; position:relative;\n border:4px solid #4a4036; touch-action: none; user-select:none;\n}\n\n.piece {\n border:1px solid #aaa;\n background-size:500px 500px;\n width:100px; height:100px; \/* 500 \/ 5 = 100px *\/\n position:absolute;\n cursor:grab;\n box-sizing:border-box;\n transition: box-shadow 0.1s;\n}\n.piece.dragging { opacity:0.7; z-index:1000; box-shadow:0 0 15px rgba(0,0,0,0.5);}\n.piece.correct { border-color:#4CAF50; }\n<\/style>\n<\/head>\n<body>\n\n<h2>Restaureer de aardewerken urn<\/h2>\n<div id=\"controls\">\n <button onclick=\"shufflePieces()\">Hussel de stukjes<\/button>\n<\/div>\n<div id=\"puzzle-container\"><\/div>\n\n<script>\nconst imageURL = \"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/02\/Klokbeker.png\";\nconst container = document.getElementById(\"puzzle-container\");\nconst size = 5;\nconst pieceSize = 500 \/ size;\nlet pieces = [];\nlet draggedPiece = null;\nlet offsetX=0, offsetY=0;\n\n\/\/ Maak puzzelstukken\nfunction createPuzzle() {\n container.innerHTML=\"\";\n pieces=[];\n for(let row=0; row<size; row++){\n for(let col=0; col<size; col++){\n const piece=document.createElement(\"div\");\n piece.classList.add(\"piece\");\n piece.style.backgroundImage=`url(${imageURL})`;\n piece.style.backgroundSize=`500px 500px`;\n piece.style.backgroundPosition=`-${col*pieceSize}px -${row*pieceSize}px`;\n piece.dataset.correctIndex = row*size + col;\n piece.dataset.row = row;\n piece.dataset.col = col;\n\n piece.style.left = `${col*pieceSize}px`;\n piece.style.top = `${row*pieceSize}px`;\n\n piece.addEventListener(\"mousedown\", startDrag);\n piece.addEventListener(\"touchstart\", startDrag, {passive:false});\n pieces.push(piece);\n container.appendChild(piece);\n }\n }\n}\n\n\/\/ Shuffle stukjes\nfunction shufflePieces(){\n const positions = [];\n for(let i=0;i<pieces.length;i++){\n let row=Math.floor(i\/size);\n let col=i%size;\n positions.push({row,col});\n }\n \/\/ shuffle\n positions.sort(()=>Math.random()-0.5);\n pieces.forEach((p,i)=>{\n p.dataset.row = positions[i].row;\n p.dataset.col = positions[i].col;\n p.style.left = `${positions[i].col*pieceSize}px`;\n p.style.top = `${positions[i].row*pieceSize}px`;\n p.classList.remove(\"correct\");\n });\n}\n\n\/\/ Drag starten\nfunction startDrag(e){\n e.preventDefault();\n draggedPiece = e.currentTarget;\n draggedPiece.classList.add(\"dragging\");\n\n const rect = draggedPiece.getBoundingClientRect();\n if(e.touches){\n offsetX = e.touches[0].clientX - rect.left;\n offsetY = e.touches[0].clientY - rect.top;\n } else {\n offsetX = e.clientX - rect.left;\n offsetY = e.clientY - rect.top;\n }\n\n document.addEventListener(\"mousemove\", onDrag);\n document.addEventListener(\"mouseup\", endDrag);\n document.addEventListener(\"touchmove\", onDrag, {passive:false});\n document.addEventListener(\"touchend\", endDrag);\n}\n\n\/\/ Beweeg drag\nfunction onDrag(e){\n e.preventDefault();\n let x = e.clientX || e.touches[0].clientX;\n let y = e.clientY || e.touches[0].clientY;\n const rect = container.getBoundingClientRect();\n draggedPiece.style.left = `${x - rect.left - offsetX}px`;\n draggedPiece.style.top = `${y - rect.top - offsetY}px`;\n}\n\n\/\/ Drag loslaten\nfunction endDrag(e){\n document.removeEventListener(\"mousemove\", onDrag);\n document.removeEventListener(\"mouseup\", endDrag);\n document.removeEventListener(\"touchmove\", onDrag);\n document.removeEventListener(\"touchend\", endDrag);\n\n \/\/ snap-to-grid\n let x = e.clientX || e.changedTouches[0].clientX;\n let y = e.clientY || e.changedTouches[0].clientY;\n const rect = container.getBoundingClientRect();\n let col = Math.floor((x - rect.left) \/ pieceSize);\n let row = Math.floor((y - rect.top) \/ pieceSize);\n\n \/\/ grens check\n row = Math.max(0, Math.min(size-1, row));\n col = Math.max(0, Math.min(size-1, col));\n\n \/\/ Kijk of een ander stuk al op die plek staat\n let targetPiece = pieces.find(p => parseInt(p.dataset.row) === row && parseInt(p.dataset.col) === col && p!==draggedPiece);\n if(targetPiece){\n \/\/ wissel posities\n let oldRow = draggedPiece.dataset.row;\n let oldCol = draggedPiece.dataset.col;\n draggedPiece.dataset.row = targetPiece.dataset.row;\n draggedPiece.dataset.col = targetPiece.dataset.col;\n targetPiece.dataset.row = oldRow;\n targetPiece.dataset.col = oldCol;\n\n targetPiece.style.left = `${targetPiece.dataset.col*pieceSize}px`;\n targetPiece.style.top = `${targetPiece.dataset.row*pieceSize}px`;\n } else {\n draggedPiece.dataset.row = row;\n draggedPiece.dataset.col = col;\n }\n\n draggedPiece.style.left = `${draggedPiece.dataset.col*pieceSize}px`;\n draggedPiece.style.top = `${draggedPiece.dataset.row*pieceSize}px`;\n draggedPiece.classList.remove(\"dragging\");\n draggedPiece=null;\n checkWin();\n}\n\n\/\/ Check of puzzel compleet\nfunction checkWin(){\n let won = pieces.every(p=>{\n return parseInt(p.dataset.row)===Math.floor(p.dataset.correctIndex\/size)\n && parseInt(p.dataset.col)===p.dataset.correctIndex%size;\n });\n pieces.forEach(p=>{\n let correct = parseInt(p.dataset.row)===Math.floor(p.dataset.correctIndex\/size)\n && parseInt(p.dataset.col)===p.dataset.correctIndex%size;\n if(correct) p.classList.add(\"correct\");\n else p.classList.remove(\"correct\");\n });\n if(won) setTimeout(()=>alert(\"\ud83c\udffa De urn is volledig gerestaureerd!\"),100);\n}\n\ncreatePuzzle();\nshufflePieces();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p>Klokbekers zijn vooral gevonden in grafheuvels (aarden grafmonumenten) uit het laat-neolithicum. Ze werden meestal als grafgift meegegeven in individuele graven onder zo\u2019n heuvel. Klokbekers dienden waarschijnlijk als drinkbekers, statussymbool en grafgift bij begrafenisrituelen. In deze graven lagen ook sieraden, polsboogbeschermers en vuurstenen werktuigen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reconstrueer een prehistorische klokbeker door de losse scherven zorgvuldig op de juiste plaats te leggen. Zodra de urn correct is gerestaureerd, verschijnt er automatisch een bericht dat de reconstructie is geslaagd. Een Klokbeker is aardewerk uit het laat-neolithicum (ca. 2800\u20131800 v.Chr.)! Klokbeker Puzzel 5×5 – Slepen Restaureer de aardewerken urn Hussel de stukjes Klokbekers zijn vooral gevonden in grafheuvels (aarden grafmonumenten) uit het laat-neolithicum. Ze werden meestal als grafgift meegegeven in individuele graven onder zo\u2019n heuvel. Klokbekers dienden waarschijnlijk als drinkbekers, statussymbool en grafgift bij begrafenisrituelen. In deze graven lagen ook sieraden, polsboogbeschermers en vuurstenen werktuigen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width-blank.php","meta":{"footnotes":""},"class_list":["post-6549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/comments?post=6549"}],"version-history":[{"count":54,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549\/revisions"}],"predecessor-version":[{"id":6677,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549\/revisions\/6677"}],"wp:attachment":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/media?parent=6549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6549,"date":"2026-02-23T01:32:25","date_gmt":"2026-02-23T01:32:25","guid":{"rendered":"https:\/\/steentijdvondsten.nl\/post\/?page_id=6549"},"modified":"2026-02-23T17:08:34","modified_gmt":"2026-02-23T17:08:34","slug":"puzzel","status":"publish","type":"page","link":"https:\/\/steentijdvondsten.nl\/post\/index.php\/puzzel\/","title":{"rendered":"Restaureer de aardewerken urn"},"content":{"rendered":"\n

Reconstrueer een prehistorische klokbeker door de losse scherven zorgvuldig op de juiste plaats te leggen. <\/p>\n\n\n\n

Zodra de urn correct is gerestaureerd, verschijnt er automatisch een bericht dat de reconstructie is geslaagd.<\/p>\n\n\n\n

Een Klokbeker is aardewerk uit het laat-neolithicum (ca. 2800\u20131800 v.Chr.)!<\/p>\n\n\n\n\n\n\n\n\nKlokbeker Puzzel 5×5 – Slepen<\/title>\n<style>\nbody { font-family: Arial, sans-serif; text-align:center; margin:0; background:#fff; }\nh2 { color:#4a4036; padding:15px; }\n#controls { margin:20px; }\nbutton { padding:10px 20px; font-size:16px; background:#6b5b4b; color:white; border:none; cursor:pointer; }\nbutton:hover { background:#8b7765; }\n\n#puzzle-container {\n width:500px; height:500px; margin:20px auto; position:relative;\n border:4px solid #4a4036; touch-action: none; user-select:none;\n}\n\n.piece {\n border:1px solid #aaa;\n background-size:500px 500px;\n width:100px; height:100px; \/* 500 \/ 5 = 100px *\/\n position:absolute;\n cursor:grab;\n box-sizing:border-box;\n transition: box-shadow 0.1s;\n}\n.piece.dragging { opacity:0.7; z-index:1000; box-shadow:0 0 15px rgba(0,0,0,0.5);}\n.piece.correct { border-color:#4CAF50; }\n<\/style>\n<\/head>\n<body>\n\n<h2>Restaureer de aardewerken urn<\/h2>\n<div id=\"controls\">\n <button onclick=\"shufflePieces()\">Hussel de stukjes<\/button>\n<\/div>\n<div id=\"puzzle-container\"><\/div>\n\n<script>\nconst imageURL = \"https:\/\/steentijdvondsten.nl\/post\/wp-content\/uploads\/2026\/02\/Klokbeker.png\";\nconst container = document.getElementById(\"puzzle-container\");\nconst size = 5;\nconst pieceSize = 500 \/ size;\nlet pieces = [];\nlet draggedPiece = null;\nlet offsetX=0, offsetY=0;\n\n\/\/ Maak puzzelstukken\nfunction createPuzzle() {\n container.innerHTML=\"\";\n pieces=[];\n for(let row=0; row<size; row++){\n for(let col=0; col<size; col++){\n const piece=document.createElement(\"div\");\n piece.classList.add(\"piece\");\n piece.style.backgroundImage=`url(${imageURL})`;\n piece.style.backgroundSize=`500px 500px`;\n piece.style.backgroundPosition=`-${col*pieceSize}px -${row*pieceSize}px`;\n piece.dataset.correctIndex = row*size + col;\n piece.dataset.row = row;\n piece.dataset.col = col;\n\n piece.style.left = `${col*pieceSize}px`;\n piece.style.top = `${row*pieceSize}px`;\n\n piece.addEventListener(\"mousedown\", startDrag);\n piece.addEventListener(\"touchstart\", startDrag, {passive:false});\n pieces.push(piece);\n container.appendChild(piece);\n }\n }\n}\n\n\/\/ Shuffle stukjes\nfunction shufflePieces(){\n const positions = [];\n for(let i=0;i<pieces.length;i++){\n let row=Math.floor(i\/size);\n let col=i%size;\n positions.push({row,col});\n }\n \/\/ shuffle\n positions.sort(()=>Math.random()-0.5);\n pieces.forEach((p,i)=>{\n p.dataset.row = positions[i].row;\n p.dataset.col = positions[i].col;\n p.style.left = `${positions[i].col*pieceSize}px`;\n p.style.top = `${positions[i].row*pieceSize}px`;\n p.classList.remove(\"correct\");\n });\n}\n\n\/\/ Drag starten\nfunction startDrag(e){\n e.preventDefault();\n draggedPiece = e.currentTarget;\n draggedPiece.classList.add(\"dragging\");\n\n const rect = draggedPiece.getBoundingClientRect();\n if(e.touches){\n offsetX = e.touches[0].clientX - rect.left;\n offsetY = e.touches[0].clientY - rect.top;\n } else {\n offsetX = e.clientX - rect.left;\n offsetY = e.clientY - rect.top;\n }\n\n document.addEventListener(\"mousemove\", onDrag);\n document.addEventListener(\"mouseup\", endDrag);\n document.addEventListener(\"touchmove\", onDrag, {passive:false});\n document.addEventListener(\"touchend\", endDrag);\n}\n\n\/\/ Beweeg drag\nfunction onDrag(e){\n e.preventDefault();\n let x = e.clientX || e.touches[0].clientX;\n let y = e.clientY || e.touches[0].clientY;\n const rect = container.getBoundingClientRect();\n draggedPiece.style.left = `${x - rect.left - offsetX}px`;\n draggedPiece.style.top = `${y - rect.top - offsetY}px`;\n}\n\n\/\/ Drag loslaten\nfunction endDrag(e){\n document.removeEventListener(\"mousemove\", onDrag);\n document.removeEventListener(\"mouseup\", endDrag);\n document.removeEventListener(\"touchmove\", onDrag);\n document.removeEventListener(\"touchend\", endDrag);\n\n \/\/ snap-to-grid\n let x = e.clientX || e.changedTouches[0].clientX;\n let y = e.clientY || e.changedTouches[0].clientY;\n const rect = container.getBoundingClientRect();\n let col = Math.floor((x - rect.left) \/ pieceSize);\n let row = Math.floor((y - rect.top) \/ pieceSize);\n\n \/\/ grens check\n row = Math.max(0, Math.min(size-1, row));\n col = Math.max(0, Math.min(size-1, col));\n\n \/\/ Kijk of een ander stuk al op die plek staat\n let targetPiece = pieces.find(p => parseInt(p.dataset.row) === row && parseInt(p.dataset.col) === col && p!==draggedPiece);\n if(targetPiece){\n \/\/ wissel posities\n let oldRow = draggedPiece.dataset.row;\n let oldCol = draggedPiece.dataset.col;\n draggedPiece.dataset.row = targetPiece.dataset.row;\n draggedPiece.dataset.col = targetPiece.dataset.col;\n targetPiece.dataset.row = oldRow;\n targetPiece.dataset.col = oldCol;\n\n targetPiece.style.left = `${targetPiece.dataset.col*pieceSize}px`;\n targetPiece.style.top = `${targetPiece.dataset.row*pieceSize}px`;\n } else {\n draggedPiece.dataset.row = row;\n draggedPiece.dataset.col = col;\n }\n\n draggedPiece.style.left = `${draggedPiece.dataset.col*pieceSize}px`;\n draggedPiece.style.top = `${draggedPiece.dataset.row*pieceSize}px`;\n draggedPiece.classList.remove(\"dragging\");\n draggedPiece=null;\n checkWin();\n}\n\n\/\/ Check of puzzel compleet\nfunction checkWin(){\n let won = pieces.every(p=>{\n return parseInt(p.dataset.row)===Math.floor(p.dataset.correctIndex\/size)\n && parseInt(p.dataset.col)===p.dataset.correctIndex%size;\n });\n pieces.forEach(p=>{\n let correct = parseInt(p.dataset.row)===Math.floor(p.dataset.correctIndex\/size)\n && parseInt(p.dataset.col)===p.dataset.correctIndex%size;\n if(correct) p.classList.add(\"correct\");\n else p.classList.remove(\"correct\");\n });\n if(won) setTimeout(()=>alert(\"\ud83c\udffa De urn is volledig gerestaureerd!\"),100);\n}\n\ncreatePuzzle();\nshufflePieces();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p>Klokbekers zijn vooral gevonden in grafheuvels (aarden grafmonumenten) uit het laat-neolithicum. Ze werden meestal als grafgift meegegeven in individuele graven onder zo\u2019n heuvel. Klokbekers dienden waarschijnlijk als drinkbekers, statussymbool en grafgift bij begrafenisrituelen. In deze graven lagen ook sieraden, polsboogbeschermers en vuurstenen werktuigen.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Reconstrueer een prehistorische klokbeker door de losse scherven zorgvuldig op de juiste plaats te leggen. Zodra de urn correct is gerestaureerd, verschijnt er automatisch een bericht dat de reconstructie is geslaagd. Een Klokbeker is aardewerk uit het laat-neolithicum (ca. 2800\u20131800 v.Chr.)! Klokbeker Puzzel 5×5 – Slepen Restaureer de aardewerken urn Hussel de stukjes Klokbekers zijn vooral gevonden in grafheuvels (aarden grafmonumenten) uit het laat-neolithicum. Ze werden meestal als grafgift meegegeven in individuele graven onder zo\u2019n heuvel. Klokbekers dienden waarschijnlijk als drinkbekers, statussymbool en grafgift bij begrafenisrituelen. In deze graven lagen ook sieraden, polsboogbeschermers en vuurstenen werktuigen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width-blank.php","meta":{"footnotes":""},"class_list":["post-6549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/comments?post=6549"}],"version-history":[{"count":54,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549\/revisions"}],"predecessor-version":[{"id":6677,"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/pages\/6549\/revisions\/6677"}],"wp:attachment":[{"href":"https:\/\/steentijdvondsten.nl\/post\/index.php\/wp-json\/wp\/v2\/media?parent=6549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}