{"id":9126,"date":"2024-08-09T12:20:21","date_gmt":"2024-08-09T12:20:21","guid":{"rendered":"https:\/\/storytic.upf.edu\/?page_id=9126"},"modified":"2024-10-22T15:47:12","modified_gmt":"2024-10-22T15:47:12","slug":"avaluacio-sessio-7-reconstruccio-01","status":"publish","type":"page","link":"https:\/\/storytic.upf.edu\/en\/avaluacio-sessio-7-presentacio\/avaluacio-sessio-7-reconstruccio-01\/","title":{"rendered":"AVALUACI\u00d3 &#8211; SESSI\u00d3 7 &#8211; Reconstrucci\u00f3 01"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#fadc50&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;#ffffff 0%|#fadc50 81%|#fadc50 100%&#8221; min_height=&#8221;966.5px&#8221; height=&#8221;1253px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; collapsed=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row column_structure=&#8221;1_4,3_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; z_index=&#8221;5&#8243; width=&#8221;100%&#8221; max_width=&#8221;2560px&#8221; module_alignment=&#8221;center&#8221; custom_margin=&#8221;30px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_blurb title=&#8221;TERAPEUTA&#8221; image=&#8221;https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/03\/ic-docent-terapeuta-1-1.png&#8221; icon_placement=&#8221;left&#8221; image_icon_width=&#8221;80px&#8221; content_max_width_tablet=&#8221;100%&#8221; content_max_width_phone=&#8221;100%&#8221; content_max_width_last_edited=&#8221;on|tablet&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;|||on|||||&#8221; header_text_align=&#8221;left&#8221; header_text_color=&#8221;#1A554E&#8221; header_font_size=&#8221;22px&#8221; body_text_align=&#8221;left&#8221; body_text_color=&#8221;#FADC50&#8243; body_font_size=&#8221;20px&#8221; image_icon_custom_margin=&#8221;-20px||||false|false&#8221; image_icon_custom_padding=&#8221;||||false|false&#8221; z_index=&#8221;12&#8243; module_alignment=&#8221;left&#8221; custom_margin=&#8221;|||10px|false|false&#8221; custom_css_free_form=&#8221;.caja_1 {||  background-color: #1a554e;||  padding: 10px 20px 15px 20px;||  margin-top: -10px;||  margin-left: -76px;||  border-radius: 15px;||  width: 110%;||  height: 100% !important;||  max-height: 360px !important;||  z-index: 1;||}||@media (min-width: 2001px) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 110%;||    height: 100% !important;||    max-height: 500px !important;||    z-index: 1;||  }||  .scrollable_text {||    font-size: 25px !important;||  }||}||||@media (min-width: 1501px) and (max-width: 2000px) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 110%;||    height: 100% !important;||    max-height: 430px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 100% !important;||    font-size: 20px !important;||    max-height: 390px !important;||    overflow: auto !important;||  }||}||@media (min-width: 1366px) and (max-width: 1500px) {||  .caja_1 {||   background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 100%;||    height: 100% !important;||    max-height: 400px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 100% !important;||    font-size: 20px !important;||    max-height: 360px !important;||    overflow: auto !important;||  }||}||@media (min-width: 980px) and (max-width: 1024px) and (orientation: landscape) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 110%;||    height: 100% !important;||    max-height: 360px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 100% !important;||    max-height: 300px !important;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 100%;||    height: 100% !important;||    max-height: 360px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 100% !important;||    max-height: 300px;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||@media (min-width: 1024px) and (max-width: 1024px) and (orientation: portrait) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 108%;||    height: 100% !important;||    max-height: 360px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 300px;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||@media (min-width: 980px) and (max-width: 1023px) and (orientation: portrait) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 100%;||    height: 100% !important;||    max-height: 260px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 200px;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||@media (min-width: 800px) and (max-width: 980px) and (orientation: portrait) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 108%;||    height: 100% !important;||    max-height: 260px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 200px;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||@media (min-width: 768px) and (max-width: 799px) and (orientation: portrait) {||  .caja_1 {||  background-color: #1a554e;||    padding: 10px 20px 15px 20px;||    margin-top: -10px;||    margin-left: -76px;||    border-radius: 15px;||    width: 108%;||    height: 100% !important;||    max-height: 160px !important;||    z-index: 1;||  }||  .scrollable_text {||    height: 100px;||    overflow: auto !important;||    font-size: 16px !important;||  }||}||close-button-white{||  margin-bottom:10px!important;||  margin-right:5px!important; ||  padding:0px!important;||  color:#ffffff!important;||}&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<div id=\"reveal_docent\" class=\"caja_1\">\n<p class=\"rv-button2 opened close-button-white\" style=\"text-align: right; padding: 0px!important;\"><span style=\"color: #ffffff;\">x<\/span><\/p>\n<div class=\"scrollable_text\">\n<p><span style=\"font-weight: 400; color: #ffffff;\">Block 1. Understanding history.<\/span><br \/>\n<span>Let&#039;s order the pictures of the story as they happened.<br \/>\n<\/span><br \/>\n<span style=\"font-weight: 400; color: #ffffff;\">Drag them to the correct position.<\/span><\/p>\n<\/div>\n<\/div>\n<p>[\/et_pb_blurb][\/et_pb_column][et_pb_column type=&#8221;3_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;100px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;#1A554E&#8221; text_font_size=&#8221;4rem&#8221; header_font=&#8221;||||||||&#8221; hover_enabled=&#8221;0&#8243; custom_css_free_form=&#8221;.dropzone {||    width: 120px;||    height: 120px;||    border: 2px dashed #1A554E;||    border-radius: 20px;||    margin: 5px;||    display: flex;||    align-items: center;||    justify-content: center;||    flex-shrink: 0; \/* Ensure drop zone does not shrink *\/||}||  .two_rows{||    display: flex;||    width: auto!important;||    flex-direction: row;||    margin-bottom: 0px;||    height: 120px;||  }||#draggable-container, #droppable-container {||    display: flex;||    flex-direction: row;||    margin-bottom: 20px;||    height: 120px!important;||}||.imgordena {||    cursor: pointer;||    width: 120px!important;||    height: 120px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 120px !important;||    height: 120px !important;||    object-fit: cover; \/* Ensure the image fills the container *\/||    margin: 0 !important; \/* No margin inside drop zone *\/||    display: block;||    flex-shrink: 0; \/* Prevent the image from shrinking *\/||}||.position-relative {||    position: relative!important;||}||||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||    margin-left:-5%;||}||||@media (min-width: 1591px) and (max-width: 1678px) {||  #draggable-container{||    flex-direction: column;||    height: 260px!important;||    justify-content: center;||    align-items:center;||    margin-left: -10%!important;||  }||}||||@media (min-width: 1511px) and (max-width: 1590px) {||  #draggable-container{||    flex-direction: column;||    height: 260px!important;||    justify-content: center;||    align-items:center;||    margin-left: -8%!important;||  }||}||||@media (min-width: 1460px) and (max-width: 1510px) {||  #draggable-container{||    flex-direction: column;||    height: 260px!important;||    justify-content: center;||    align-items:center;||    margin-left: -3.5%!important;||  }||}||||@media (min-width: 1420px) and (max-width: 1459px) {||  #draggable-container{||    flex-direction: column;||    height: 260px!important;||    justify-content: center;||    align-items:center;||  }||}||||@media (min-width: 1420px) and (max-width: 1678px) {||  .dropzone {||    width: 108px!important;||    height: 108px!important;||}||  .two_rows{||    display: flex;||    width: 650px!important;||    flex-direction: row;||    margin-bottom: 10px;||    height: 120px!important;||  }||  .imgordena {||    cursor: pointer;||    width: 120px!important;||    height: 120px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 108px!important;||    height: 108px!important;||    margin: 0 !important;||}||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||  \tmargin-left:-12%;||}||  #droppable-container {||    height: 106px!important;||}||  .et_pb_text_0.et_pb_text {||    font-size: 2.5rem;||}||}||||@media (min-width: 1250px) and (max-width: 1419px) {||  .dropzone {||    width: 98px!important;||    height: 98px!important;||}||  .imgordena {||    cursor: pointer;||    width: 98px!important;||    height: 98px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 98px!important;||    height: 98px!important;||    margin: 0 !important;||}||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||  \tmargin-left:-15%;||}||  #draggable-container, #droppable-container {||    height: 98px!important;||}||  .et_pb_text_0.et_pb_text {||    font-size: 2.5rem;||}||}||||@media (min-width: 981px) and (max-width: 1249px) {||  .dropzone {||    width: 62px!important;||    height: 62px!important;||}||  .imgordena {||    cursor: pointer;||    width: 62px!important;||    height: 62px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 62px!important;||    height: 62px!important;||    margin: 0 !important;||}||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||  \tmargin-left:-2%;||}||  #draggable-container, #droppable-container {||    height: 60px!important;||}||  .et_pb_text_0.et_pb_text {||    font-size: 2.5rem;||}||}||@media (min-width: 860px) and (max-width: 980px) {||  .dropzone {||    width: 72px!important;||    height: 72px!important;||}||  .imgordena {||    cursor: pointer;||    width: 72px!important;||    height: 72px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 72px!important;||    height: 72px!important;||    margin: 0 !important;||}  ||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||  \tmargin-left:3%;||}||  #draggable-container, #droppable-container {||    height: 70px!important;||}||    .et_pb_text_0.et_pb_text {||    font-size: 2.5rem;||}||}||@media (min-width: 768px) and (max-width: 859px) {||  .dropzone {||    width: 62px!important;||    height: 62px!important;||}||  .imgordena {||    cursor: pointer;||    width: 62px!important;||    height: 62px!important;||    border: 2px solid #1A554E;||    border-radius: 20px;||  \tmargin: 5px;||}||.dropzone .imgordena {||    width: 62px!important;||    height: 62px!important;||    margin: 0 !important;||}  ||.contacontes {||  \tmargin-top: -60px;||    margin-bottom: 31px;||  \tmargin-left:3%;||}||  #draggable-container, #droppable-container {||    height: 60px!important;||}||    .et_pb_text_0.et_pb_text {||    font-size: 2.5rem;||}||}&#8221; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<div class=\"position-relative contacontes\">\n<div class=\"\">\n<div id=\"draggable-container\">\n<div class=\"two_rows\"><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar_1-1.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar2.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar3.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar4.png\" draggable=\" true=\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar5.png\" draggable=\"true\" \/><\/div>\n<div class=\"two_rows\"><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar6.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar7.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar8.png\" draggable=\"true\" \/><img decoding=\"async\" class=\"imgordena\" src=\"https:\/\/storytic.upf.edu\/wp-content\/uploads\/2024\/07\/ordenar9.png\" draggable=\"true\" \/><\/div>\n<\/div>\n<div id=\"droppable-container\">\n<div class=\"dropzone\"><span><strong>1<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>2<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>3<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>4<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>5<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>6<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>7<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>8<\/strong><\/span><\/div>\n<div class=\"dropzone\"><span><strong>9<\/strong><\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>[\/et_pb_text][et_pb_code admin_label=&#8221;Code&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<script type=\"text\/javascript\"><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function() {<!-- [et_pb_line_break_holder] -->jQuery('.rv_button').click(function(e){<!-- [et_pb_line_break_holder] -->e.preventDefault();jQuery(\"#reveal\").slideToggle();jQuery(\"#reveal2\").slideToggle();<!-- [et_pb_line_break_holder] -->jQuery('.rv_button').toggleClass('opened closed');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->jQuery('.rv_button2').click(function(e2){<!-- [et_pb_line_break_holder] -->e2.preventDefault();jQuery(\"#reveal_docent\").slideToggle();jQuery(\"#reveal_docent2\").slideToggle();<!-- [et_pb_line_break_holder] -->jQuery('.rv_button2').toggleClass('opened closed');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><\/script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/* Juego Ordena *\/<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const images = ['ordenar_1-1.png', 'ordenar2.png', 'ordenar3.png', 'ordenar4.png','ordenar5.png', 'ordenar6.png', 'ordenar7.png','ordenar8.png', 'ordenar9.png'];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->let draggedItem = null;<!-- [et_pb_line_break_holder] -->let draggedFrom = null;<!-- [et_pb_line_break_holder] -->let isDragging = false;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->const draggableContainer = document.getElementById('draggable-container');<!-- [et_pb_line_break_holder] -->const dropZones = document.querySelectorAll('.dropzone');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Add event listeners for mouse (drag events) and touch events<!-- [et_pb_line_break_holder] -->document.querySelectorAll('#draggable-container img').forEach(img => {<!-- [et_pb_line_break_holder] -->    img.addEventListener('dragstart', dragStart); \/\/ For mouse drag<!-- [et_pb_line_break_holder] -->    img.addEventListener('touchstart', touchStart, { passive: false }); \/\/ For touch<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->dropZones.forEach(zone => {<!-- [et_pb_line_break_holder] -->    zone.addEventListener('dragover', dragOver);<!-- [et_pb_line_break_holder] -->    zone.addEventListener('drop', drop);<!-- [et_pb_line_break_holder] -->    zone.addEventListener('touchmove', touchMove, { passive: false }); \/\/ For touch<!-- [et_pb_line_break_holder] -->    zone.addEventListener('touchend', drop, { passive: false }); \/\/ For touch<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Mouse drag functions<!-- [et_pb_line_break_holder] -->function dragStart(e) {<!-- [et_pb_line_break_holder] -->    draggedItem = e.target;<!-- [et_pb_line_break_holder] -->    draggedFrom = e.target.parentElement;<!-- [et_pb_line_break_holder] -->    isDragging = true;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function dragOver(e) {<!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function drop(e) {<!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->    const dropZone = e.target.closest('.dropzone');<!-- [et_pb_line_break_holder] -->    if (dropZone && !dropZone.querySelector('img')) {<!-- [et_pb_line_break_holder] -->        if (draggedFrom.classList.contains('dropzone')) {<!-- [et_pb_line_break_holder] -->            draggedFrom.innerHTML = '<span>' + (Array.from(dropZones).indexOf(draggedFrom) + 1) + '<\/span>';<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->        dropZone.appendChild(draggedItem);<!-- [et_pb_line_break_holder] -->        dropZone.querySelector('span').style.display = 'none';<!-- [et_pb_line_break_holder] -->        checkOrder();<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    isDragging = false;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->\/\/ Touch functions<!-- [et_pb_line_break_holder] -->function touchStart(e) {<!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->    const touch = e.touches[0];<!-- [et_pb_line_break_holder] -->    draggedItem = e.target;<!-- [et_pb_line_break_holder] -->    draggedFrom = e.target.parentElement;<!-- [et_pb_line_break_holder] -->    isDragging = true;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function touchMove(e) {<!-- [et_pb_line_break_holder] -->    e.preventDefault();<!-- [et_pb_line_break_holder] -->    const touch = e.touches[0];<!-- [et_pb_line_break_holder] -->    const elementAtPoint = document.elementFromPoint(touch.clientX, touch.clientY);<!-- [et_pb_line_break_holder] -->    if (elementAtPoint && elementAtPoint.classList.contains('dropzone')) {<!-- [et_pb_line_break_holder] -->        \/\/ Optional: highlight the current dropzone<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function checkOrder() {<!-- [et_pb_line_break_holder] -->    const imgs = Array.from(document.getElementById('droppable-container').getElementsByTagName('img'));<!-- [et_pb_line_break_holder] -->    if (imgs.length === 9) {<!-- [et_pb_line_break_holder] -->        const order = imgs.map(img => img.src.split('\/').pop());<!-- [et_pb_line_break_holder] -->        if (JSON.stringify(order) === JSON.stringify(images)) {<!-- [et_pb_line_break_holder] -->            window.location.href = 'https:\/\/storytic.upf.edu\/avaluacio-sessio-7-presentacio\/avaluacio-sessio-7-reconstruccio-02\/'<!-- [et_pb_line_break_holder] -->            \/\/ resetGame();<!-- [et_pb_line_break_holder] -->        } else {<!-- [et_pb_line_break_holder] -->            alert('Intenta-ho de nou!');<!-- [et_pb_line_break_holder] -->            resetGame();<!-- [et_pb_line_break_holder] -->        }<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function resetGame() {<!-- [et_pb_line_break_holder] -->    \/\/ Get all images from dropzones and put them back in the draggable container<!-- [et_pb_line_break_holder] -->    const images = document.querySelectorAll('#droppable-container img');<!-- [et_pb_line_break_holder] -->    images.forEach(img => {<!-- [et_pb_line_break_holder] -->        draggableContainer.appendChild(img); \/\/ Move all images back to the draggable container<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Get the images in a shuffled order<!-- [et_pb_line_break_holder] -->    const shuffledImages = shuffle(Array.from(draggableContainer.getElementsByTagName('img')));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Select the two rows inside the draggable container<!-- [et_pb_line_break_holder] -->    const rows = document.querySelectorAll('#draggable-container .two_rows');<!-- [et_pb_line_break_holder] -->    const firstRow = rows[0];<!-- [et_pb_line_break_holder] -->    const secondRow = rows[1];<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Clear both rows<!-- [et_pb_line_break_holder] -->    firstRow.innerHTML = '';<!-- [et_pb_line_break_holder] -->    secondRow.innerHTML = '';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Split shuffled images between the two rows (first 6 images in first row, last 6 in second row)<!-- [et_pb_line_break_holder] -->    shuffledImages.slice(0, 5).forEach(img => firstRow.appendChild(img));<!-- [et_pb_line_break_holder] -->    shuffledImages.slice(5).forEach(img => secondRow.appendChild(img));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    \/\/ Reset dropzones to show span numbers again<!-- [et_pb_line_break_holder] -->    document.querySelectorAll('.dropzone span').forEach(span => {<!-- [et_pb_line_break_holder] -->        span.style.display = 'block';<!-- [et_pb_line_break_holder] -->    });<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->document.addEventListener('dragend', () => {<!-- [et_pb_line_break_holder] -->    if (isDragging) {<!-- [et_pb_line_break_holder] -->        draggedItem.style.display = 'block';<!-- [et_pb_line_break_holder] -->        isDragging = false;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function shuffle(array) {<!-- [et_pb_line_break_holder] -->    let currentIndex = array.length, temporaryValue, randomIndex;<!-- [et_pb_line_break_holder] -->    while (0 !== currentIndex) {<!-- [et_pb_line_break_holder] -->        randomIndex = Math.floor(Math.random() * currentIndex);<!-- [et_pb_line_break_holder] -->        currentIndex -= 1;<!-- [et_pb_line_break_holder] -->        temporaryValue = array[currentIndex];<!-- [et_pb_line_break_holder] -->        array[currentIndex] = array[randomIndex];<!-- [et_pb_line_break_holder] -->        array[randomIndex] = temporaryValue;<!-- [et_pb_line_break_holder] -->    }<!-- [et_pb_line_break_holder] -->    return array;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->resetGame();<!-- [et_pb_line_break_holder] --><\/script>[\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=&#8221;1_5,1_5,1_5,1_5,1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; positioning=&#8221;fixed&#8221; position_origin_f=&#8221;bottom_center&#8221; vertical_offset=&#8221;0px&#8221; z_index=&#8221;200&#8243; width=&#8221;90%&#8221; max_width=&#8221;2560px&#8221; height=&#8221;90px&#8221; custom_margin=&#8221;||30px||false|false&#8221; custom_padding=&#8221;3px|15px|0px||false|false&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#x34;||divi||400&#8243; icon_color=&#8221;#fadc50&#8243; icon_width=&#8221;32px&#8221; url=&#8221;https:\/\/storytic.upf.edu\/avaluacio-sessio-7-presentacio\/avaluacio-sessio-7-presentacio-01\/&#8221; admin_label=&#8221;Icon&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;#1a554e&#8221; custom_padding=&#8221;10px|20px|10px|15px|true|false&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_5&#8243; disabled_on=&#8221;off|on|off&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_column][et_pb_column type=&#8221;1_5&#8243; disabled_on=&#8221;off|on|off&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_icon font_icon=&#8221;&#x34;||divi||400&#8243; icon_color=&#8221;RGBA(255,255,255,0)&#8221; icon_width=&#8221;32px&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; custom_padding=&#8221;10px|20px|10px|15px|true|false&#8221; border_radii=&#8221;on|10px|10px|10px|10px&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;][\/et_pb_icon][\/et_pb_column][et_pb_column type=&#8221;1_5&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_button button_url=&#8221;https:\/\/storytic.upf.edu\/avaluacio-sessio-7-presentacio\/avaluacio-sessio-7-reconstruccio-02\/&#8221; button_text=&#8221;Soluci\u00f3&#8221; button_alignment=&#8221;center&#8221; module_id=&#8221;top_button&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; custom_button=&#8221;on&#8221; button_text_color=&#8221;#fadc50&#8243; button_bg_color=&#8221;#1a554e&#8221; button_border_width=&#8221;0px&#8221; button_border_radius=&#8221;10px&#8221; button_font=&#8221;Montserrat|||on|on|||RGBA(255,255,255,0)|&#8221; button_use_icon=&#8221;off&#8221; background_layout=&#8221;dark&#8221; custom_padding=&#8221;10px|50px|10px|50px|true|true&#8221; custom_css_free_form=&#8221;#top_button, .et_pb_button_0_wrapper{||  margin-bottom:8px!important;||}&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; button_bg_color__hover_enabled=&#8221;on|desktop&#8221; button_bg_color__hover=&#8221;#216860&#8243; button_bg_enable_color__hover=&#8221;on&#8221;][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>","protected":false},"excerpt":{"rendered":"<p>x Bloc 1. Comprensi\u00f3 de la hist\u00f2ria. Ordenem les imatges del conte tal com han passat. Arrossega-les a la posici\u00f3 correcta. 1 2 3 4 5 6 7 8 9<\/p>","protected":false},"author":3,"featured_media":0,"parent":9115,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-9126","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/pages\/9126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/comments?post=9126"}],"version-history":[{"count":16,"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/pages\/9126\/revisions"}],"predecessor-version":[{"id":10466,"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/pages\/9126\/revisions\/10466"}],"up":[{"embeddable":true,"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/pages\/9115"}],"wp:attachment":[{"href":"https:\/\/storytic.upf.edu\/en\/wp-json\/wp\/v2\/media?parent=9126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}