2 lines
16 KiB
JavaScript
Executable File
2 lines
16 KiB
JavaScript
Executable File
(self.webpackChunkWebComponents=self.webpackChunkWebComponents||[]).push([[759],{32552:()=>{$.i18n().load({en:{msg_dragndrop_correct_answer:"You are correct!",msg_dragndrop_incorrect_answer:"Incorrect. Of the cards you have sorted you placed $1 correctly and $2 incorrectly. You have $4 left to place.",msg_dragndrop_check_me:"Check me",msg_dragndrop_reset:"Reset"}})},56759:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>n});var r=i(78673);i(32552),i(81264);class s extends r.A{constructor(e){super(e);var t=e.orig;this.origElem=t,this.divid=t.id,this.useRunestoneServices=e.useRunestoneServices,this.random=!0,"no"===this.origElem.dataset.random&&(this.random=!1),this.feedback="",this.question="",this.populate(),this.createNewElements(),this.caption="Drag-N-Drop",this.addCaption("runestone"),"undefined"!=typeof Prism&&Prism.highlightAllUnder(this.containerDiv)}populate(){this.responseArray=[],this.premiseArray=[];let e=document.createElement("div");e.classList.add("ptx-runestone-container"),document.body.appendChild(e),console.log("Populating DragNDrop with premises and responses"),this.cards=this.origElem.querySelectorAll("[data-subcomponent='draggable']");for(let t of this.cards){let i=document.createElement("span");i.innerHTML=t.innerHTML,i.id=t.id,i.setAttribute("draggable","true"),i.classList.add("draggable-drag"),i.classList.add("premise"),i.tabIndex=0,i.setAttribute("role","button"),i.dataset.category=this.getCategory(t),i.dataset.parent_id=this.divid,this.premiseArray.push(i),this.setDragListeners(i);let r=document.createElement("div");r.classList.add("vh-dnd-error"),r.innerHTML="Incorrect drop zone for "+i.innerHTML,r.setAttribute("role","alert"),r.id=i.id+"_error",e.appendChild(r)}this.random&&(this.premiseArray=a(this.premiseArray));for(let e of this.origElem.querySelectorAll("[data-subcomponent='dropzone']")){let t=document.createElement("span");t.innerHTML=e.innerHTML,t.id=e.getAttribute("for").replace("drag","drop"),t.classList.add("draggable-drop","drop-label","response"),t.tabIndex=0,t.setAttribute("role","button"),t.dataset.category=this.getCategory(e),t.dataset.parent_id=this.divid,this.responseArray.push(t),this.setDropListeners(t)}this.question=this.origElem.querySelector("[data-subcomponent='question']").innerHTML;let t=this.origElem.querySelector("[data-subcomponent='feedback']");t&&(this.feedback=t.innerHTML)}getCategory(e){return e.dataset.category?e.dataset.category:e.hasAttribute("for")?e.getAttribute("for"):e.id}createNewElements(){this.containerDiv=document.createElement("div"),this.containerDiv.id=this.divid,this.containerDiv.classList.add("draggable-container"),this.statementDiv=document.createElement("div"),this.statementDiv.classList.add("cardsort-statement"),this.statementDiv.classList.add("exercise-statement");try{this.statementDiv.innerHTML=this.question}catch(e){console.error("Error setting statementDiv innerHTML:",e)}this.containerDiv.appendChild(this.statementDiv),this.dragDropWrapDiv=document.createElement("div"),this.dragDropWrapDiv.style.display="block",this.containerDiv.appendChild(this.dragDropWrapDiv),this.draggableDiv=document.createElement("div"),this.draggableDiv.classList.add("rsdraggable","dragzone"),this.addDragDivListeners(),this.dropZoneDiv=document.createElement("div"),this.dropZoneDiv.classList.add("rsdraggable"),this.dragDropWrapDiv.appendChild(this.draggableDiv),this.dragDropWrapDiv.appendChild(this.dropZoneDiv),this.createButtons(),this.checkServer("dragNdrop",!0),eBookConfig.practice_mode&&this.finishSettingUp(),self=this,this.ivp=this.isValidPremise.bind(this),self.queueMathJax(self.containerDiv)}finishSettingUp(){this.appendReplacementSpans(),this.createFeedbackDiv(),console.log("Replacing origElem with containerDiv"),this.origElem.parentNode.replaceChild(this.containerDiv,this.origElem),this.hasStoredDropzones||(this.minheight=this.draggableDiv.offsetHeight,this.queueMathJax(this.containerDiv).then((()=>{this.adjustDragDropWidths()}))),this.draggableDiv.style.minHeight=this.minheight.toString()+"px",this.dropZoneDiv.offsetHeight>this.minheight?this.dragDropWrapDiv.style.minHeight=this.dropZoneDiv.offsetHeight.toString()+"px":this.dragDropWrapDiv.style.minHeight=this.minheight.toString()+"px",this.draggableDiv.style.width=`${this.dragwidth}%`,this.dropZoneDiv.style.width=`${this.dropwidth}%`}addDragDivListeners(){let e=this;this.draggableDiv.addEventListener("dragover",function(e){e.preventDefault(),this.draggableDiv.classList.contains("possibleDrop")||this.draggableDiv.classList.add("possibleDrop")}.bind(this)),this.draggableDiv.addEventListener("drop",function(t){e.isAnswered=!0,t.preventDefault(),this.draggableDiv.classList.contains("possibleDrop")&&this.draggableDiv.classList.remove("possibleDrop");var i=t.dataTransfer.getData("draggableID"),r=document.getElementById(i);this.draggableDiv.contains(r)||this.strangerDanger(r)||(this.draggableDiv.appendChild(r),this.adjustDragDropWidths(),this.minheight=this.draggableDiv.offsetHeight,this.dragDropWrapDiv.style.minHeight=this.minheight.toString()+"px",this.logBookEvent({event:"dragNdrop-drop",div_id:this.divid,act:`${i} -> dragzone`}))}.bind(this)),this.draggableDiv.addEventListener("dragleave",function(e){this.draggableDiv.classList.contains("possibleDrop")&&this.draggableDiv.classList.remove("possibleDrop")}.bind(this))}createButtons(){this.buttonDiv=document.createElement("div"),this.buttonDiv.classList.add("dnd-button-container"),this.submitButton=document.createElement("button"),this.submitButton.textContent=$.i18n("msg_dragndrop_check_me"),this.submitButton.setAttribute("class","btn btn-success drag-button"),this.submitButton.setAttribute("name","do answer"),this.submitButton.setAttribute("type","button"),this.submitButton.onclick=function(){this.checkCurrentAnswer(),this.renderFeedback(),this.logCurrentAnswer()}.bind(this),this.resetButton=document.createElement("button"),this.resetButton.textContent=$.i18n("msg_dragndrop_reset"),this.resetButton.setAttribute("class","btn btn-default drag-button drag-reset"),this.resetButton.setAttribute("name","do answer"),this.resetButton.onclick=function(){this.resetDraggables()}.bind(this),this.buttonDiv.appendChild(this.submitButton),this.buttonDiv.appendChild(this.resetButton),this.containerDiv.appendChild(this.buttonDiv)}appendReplacementSpans(){if(void 0===this.answerState||0===Object.keys(this.answerState).length){this.answerState={};for(let e of this.premiseArray)this.draggableDiv.appendChild(e);for(let e of this.responseArray)this.dropZoneDiv.appendChild(e)}else{let e=[];for(let t of this.responseArray)if(this.dropZoneDiv.appendChild(t),this.answerState[t.id])for(let i of this.answerState[t.id]){e.push(i);let r=this.findPremise(i);r?t.appendChild(r):console.warn(`Premise with ID ${i} not found in premiseArray`)}for(let t of this.premiseArray)-1==e.indexOf(t.id)&&this.draggableDiv.appendChild(t)}}findPremise(e){for(let t of this.premiseArray)if(t.id==e)return t}countSavedPremises(){let e=0,t={};for(let i of this.answerState)if(i.length>0)for(let r of i)t[r]||(e++,t[r]=!0);return e}setDragListeners(e){let t=this;e.addEventListener("dragstart",(function(e){e.dataTransfer.setData("draggableID",e.target.id)})),e.addEventListener("dragover",(function(e){e.preventDefault()})),e.addEventListener("drop",function(e){t.isAnswered=!0,e.preventDefault();var i=e.dataTransfer.getData("draggableID"),r=document.getElementById(i);r==e.target||this.strangerDanger(r)||this.draggableDiv.appendChild(r)}.bind(this)),e.addEventListener("keydown",(function(i){"Enter"!==i.key&&" "!==i.key||(i.preventDefault(),t.selectedPremise?(t.selectedPremise.classList.remove("selected"),t.selectedPremise=null):(t.selectedPremise=e,e.classList.add("selected")))}))}setDropListeners(e){e.addEventListener("dragover",function(e){self.isAnswered=!0,e.preventDefault(),e.target.classList.contains("possibleDrop")||e.target.classList.contains("draggable-drop")&&e.target.classList.add("possibleDrop")}.bind(this)),e.addEventListener("dragleave",(function(e){self.isAnswered=!0,e.preventDefault(),e.target.classList.contains("possibleDrop")&&e.target.classList.remove("possibleDrop")})),e.addEventListener("drop",function(e){self.isAnswered=!0,e.preventDefault(),e.target.classList.contains("possibleDrop")&&e.target.classList.remove("possibleDrop");var t=e.dataTransfer.getData("draggableID"),i=document.getElementById(t);!e.target.classList.contains("draggable-drop")||this.strangerDanger(i)||this.premiseArray.includes(e.target)||(e.target.appendChild(i),this.logBookEvent({event:"dragNdrop-drop",div_id:this.divid,act:`${t} -> ${e.target.id}`})),this.queueMathJax(this.containerDiv).then((()=>{this.adjustDragDropWidths()}))}.bind(this)),e.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||!self.selectedPremise||(t.preventDefault(),self.strangerDanger(self.selectedPremise)||self.premiseArray.includes(e)||(e.appendChild(self.selectedPremise),self.selectedPremise.classList.remove("selected"),self.selectedPremise=null,self.queueMathJax(self.containerDiv).then((()=>{self.adjustDragDropWidths()}))))}))}adjustDragDropWidths(){this.draggableDiv.style.width="fit-content";const e=this.draggableDiv.offsetWidth,t=this.dragDropWrapDiv.offsetWidth;let i=Math.ceil(e/t*100);i=Math.max(28,Math.min(i,48));const r=100-i-4;this.dragwidth=i,this.dropwidth=r,this.draggableDiv.style.width=`${i}%`,this.dropZoneDiv.style.width=`${r}%`}createFeedbackDiv(){this.feedBackDiv||(this.feedBackDiv=document.createElement("div"),this.feedBackDiv.id=this.divid+"_feedback",this.feedBackDiv.classList.add("exercise-content"),this.feedBackDiv.setAttribute("aria-live","polite"),this.feedBackDiv.setAttribute("role","status"),this.containerDiv.appendChild(this.feedBackDiv))}strangerDanger(e){return e.dataset.parent_id!=this.divid}resetDraggables(){this.dropZoneDiv.innerHTML="";for(let e of this.responseArray)e.classList.remove("drop-incorrect"),this.dropZoneDiv.appendChild(e);this.draggableDiv.innerHTML="",this.random&&(this.premiseArray=a(this.premiseArray));for(let e of this.premiseArray)this.draggableDiv.appendChild(e);this.answerState={},this.feedBackDiv.style.display="none",this.adjustDragDropWidths(),this.minheight=this.draggableDiv.offsetHeight,this.dragDropWrapDiv.style.minHeight=this.minheight.toString()+"px",this.feedBackDiv.style.visibility="hidden",this.logBookEvent({event:"dragNdrop-reset",div_id:this.divid,act:"reset"}),this.setLocalStorage({correct:"F"})}getAllCategories(){this.categories=[];for(let e of this.dropZoneDiv.childNodes)this.categories.push(e.dataset.category);return this.categories}checkCurrentAnswer(){let e=this.getAllCategories();this.correct=!0,this.unansweredNum=0,this.incorrectNum=0,this.correctNum=0,this.dragNum=this.premiseArray.length;for(let e of this.dropZoneDiv.childNodes)for(let t of Array.from(e.childNodes).filter(this.ivp))t.dataset.category==e.dataset.category?this.correctNum++:this.incorrectNum++;for(let t of Array.from(this.draggableDiv.childNodes).filter((e=>e.nodeType!==Node.TEXT_NODE)))-1==e.indexOf(t.dataset.category)?this.correctNum++:this.unansweredNum++;this.percent=this.correctNum/this.premiseArray.length,console.log(this.percent,this.incorrectNum,this.unansweredNum),this.percent<1&&(this.correct=!1),this.setLocalStorage({correct:this.correct?"T":"F"})}isCorrectDrop(e){let t=!0,i=0;for(let r of Array.from(e.childNodes).filter(this.ivp))r.dataset.category!=e.dataset.category?t=!1:i++;let r=0;for(let t of this.premiseArray)t.dataset.category==e.dataset.category&&r++;return t&&i==r}isValidPremise(e){return!!this.premiseArray.includes(e)}async logCurrentAnswer(e){let t=JSON.stringify(this.answerState),i={event:"dragNdrop",act:t,answer:t,min_height:Math.round(this.minheight),drag_width:this.dragwidth,drop_width:this.dropwidth,div_id:this.divid,correct:this.correct,correctNum:this.correctNum,dragNum:this.dragNum};void 0!==e&&(i.sid=e),await this.logBookEvent(i)}renderFeedback(){for(let e of this.dropZoneDiv.childNodes)for(let t of Array.from(e.childNodes).filter(this.ivp))t.dataset.category!=e.dataset.category?(t.classList.add("drop-incorrect"),t.setAttribute("aria-invalid","true"),t.setAttribute("aria-errormessage",t.id+"_error"),document.getElementById(t.id+"_error").classList.remove("vh-dnd-error")):(t.classList.remove("drop-incorrect"),t.setAttribute("aria-invalid","false"),t.removeAttribute("aria-errormessage"));if(this.feedBackDiv||this.createFeedbackDiv(),this.feedBackDiv.style.visibility="visible",this.correct){var e=$.i18n("msg_dragndrop_correct_answer");setTimeout((()=>{this.feedBackDiv.innerHTML=e}),10),this.feedBackDiv.className="alert alert-info draggable-feedback exercise-content"}else{var t=$.i18n($.i18n("msg_dragndrop_incorrect_answer"),this.correctNum,this.incorrectNum,this.dragNum,this.unansweredNum);setTimeout((()=>{this.feedBackDiv.innerHTML=`<div class="para">${t}</div> ${this.feedback}`}),10),this.feedBackDiv.className="alert alert-danger draggable-feedback exercise-content"}this.queueMathJax(this.feedBackDiv)}restoreAnswers(e){this.hasStoredDropzones=!0,this.minheight=e.min_height,this.dragwidth=e.drag_width,this.dropwidth=e.drop_width,this.answerState=JSON.parse(e.answer),this.correct=e.correct,this.finishSettingUp()}checkLocalStorage(){if(this.graderactive)this.finishSettingUp();else{var e;if(this.hasStoredDropzones=!1,localStorage.length>0){var t=localStorage.getItem(this.localStorageKey());if(null!==t){this.hasStoredDropzones=!0;try{e=JSON.parse(t),this.minheight=e.min_height,this.dragwidth=e.drag_width,this.dropwidth=e.drop_width}catch(e){return console.log(e.message),localStorage.removeItem(this.localStorageKey()),this.hasStoredDropzones=!1,void this.finishSettingUp()}if(this.answerState=e.answer,this.useRunestoneServices){let t=JSON.stringify(this.answerState);this.logBookEvent({event:"dragNdrop",act:t,answer:t,min_height:Math.round(this.minheight),drag_width:this.dragwidth,drop_width:this.dropwidth,div_id:this.divid,correct:e.correct})}}}this.finishSettingUp()}}setLocalStorage(e){if(void 0===e.answer){this.answerState={};for(let e of this.dropZoneDiv.childNodes){this.answerState[e.id]=[];for(let t of e.childNodes)t.nodeType!==Node.TEXT_NODE&&this.premiseArray.includes(t)&&this.answerState[e.id].push(t.id)}}var t=new Date,i=e.correct,r={answer:this.answerState,min_height:this.minheight,timestamp:t,correct:i,drag_width:this.dragwidth,drop_width:this.dropwidth};localStorage.setItem(this.localStorageKey(),JSON.stringify(r))}disableInteraction(){this.resetButton.style.display="none";for(var e=0;e<this.premiseArray.length;e++)this.premiseArray[e].draggable=!1,this.premiseArray[e].style.cursor="initial"}}function a(e){for(let t=e.length-1;t>0;t--){const i=Math.floor(Math.random()*(t+1));[e[t],e[i]]=[e[i],e[t]]}return e}document.addEventListener("runestone:login-complete",(function(){document.querySelectorAll("[data-component=dragndrop]").forEach((e=>{const t={orig:e,useRunestoneServices:eBookConfig.useRunestoneServices};if(!e.closest("[data-component=timedAssessment]"))try{window.componentMap[e.id]=new s(t)}catch(t){console.log(`Error rendering DragNDrop Problem ${e.id}: ${t}`)}}))}));class n extends s{constructor(e){super(e),this.finishSettingUp(),this.renderTimedIcon(this.containerDiv),this.hideButtons()}hideButtons(){$(this.submitButton).hide()}renderTimedIcon(e){var t=document.createElement("div"),i=document.createElement("img");$(i).attr({src:"../_static/clock.png",style:"width:15px;height:15px"}),t.className="timeTip",t.title="",t.appendChild(i),$(e).prepend(t)}checkCorrectTimed(){switch(this.unansweredNum===this.dragPairArray.length&&(this.correct=null),this.correct){case!0:return"T";case!1:return"F";default:return null}}hideFeedback(){$(this.feedBackDiv).hide()}}void 0===window.component_factory&&(window.component_factory={}),window.component_factory.dragndrop=function(e){return e.timed?new n(e):new s(e)}},81264:()=>{$.i18n().load({"pt-br":{msg_dragndrop_correct_answer:"Correto!",msg_dragndrop_incorrect_answer:"Incorreto. Você teve $1 correto(s) e $2 incorreto(s) de $3. Você deixou $4 em branco.",msg_dragndrop_check_me:"Verificar",msg_dragndrop_reset:"Resetar"}})}}]);
|
|
//# sourceMappingURL=759.f27ff66e7ad33076.js.map
|