javascript - How to disable div(s) until previous div has been filled in -
i'm making drag , drop quiz, start have 4 questions in answers can picked , dropped corresponding question. want disable drop box questions 2,3,4 until question 1 answered. re-active q2 leaving 3,4 disabled , on.... i'm quite new javascript , have tried multiple ways this, including looking @ other situations similar mine on here have yet succeeded! have put screenshot of quiz far make clearer.
hopefully can help, thanks!
all code below:
html:
<!doctype html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <script src="draganddrop.js"></script> </head> <body> <div id="container"> <h1>san failure</h1> <p>your san's raid controller has failed , corrupted significant amount of data. need contact dr provider failover recovery environment whilst restore internal servers backup images.</p> </div> <div id="maincontainer"> <div id="dragscriptcontainer"> <div id="questiondiv"> <p><strong>task one: damage control</strong></p> <div class="dragdropsmallbox textbox" id="q1">1. find relevant ip address affected hardware</div><div class="destinationbox"></div> <div class="dragdropsmallbox textbox" id="q2">2. notify disaster recovery provider</div><div class="destinationbox"></div> <div class="dragdropsmallbox textbox" id="q3">3. inform team of directors of situation</div><div class="destinationbox"></div> <div class="dragdropsmallbox textbox disabled="true"" id="q4">4. update emergency phone message</div><div class="destinationbox"></div> </div> <div class="feedback"> <div id="feedback"></div> <div id="counter">0</div> <div id="result"></div> </div> <div class="container"> <h1 style="text-align:center">disaster recovery runbook</h1> <!-- page 1 --> <h5 style="color: red; ">page 1</h5> <h2>executive summary</h2> <p>[acme ltd. company information]<br>acme ltd. has 9 virtual servers , 4 physical servers hosted @ onsite data centre.<br>the key staff required recovery [it manager], [backup manager] , [disaster recovery provider]. servers must recovered within 8 hours of invocation. </p> <!-- page 2 --> <h5 style="color: red; ">page 2</h5> <h2>contents</h2> <p><strong> invoking disaster recovery<br> key contacts<br> call tree<br> emergency phone message<br> network diagram<br> recovery locations<br> software license , registration keys<br> event log<br> recovery templates </strong></p> <!-- page 3 --> <h5 style="color: red; ">page 3</h5> <h2>invoking disaster recovery</h2> <p>if crisis or disaster has occurred, business continuity manager must decide course of action. if, whatever reason, business continuity manager unable perform these duties, refer cascading decision-making hierarchy below.<br>only senior member authorized invoke dr plan, subject availability.<br>1. business continuity manager<br>2. director<br>3. manager<br>4. administrator<br>in event none of stated staff members available...good luck.</p> <div id="answerdiv"> <!-- page 4 --> <h5 style="color: red; ">page 4</h5> <h2>key contacts</h2> <main class="flex-center"> <table> <tr> <td><p><strong>contact</strong></p></td> <td><p><strong>telephone number</strong></p></td> <td><p><strong>email address</strong></p></td> </tr> <tr> <td><p>managing director</p></td> <td><div class="dragdropsmallbox" id="a3">0123456789</div></td> <td><div class="dragdropsmallbox" id="a10">m.d@acme.com</div></td> </tr> <tr> <td><p>financial director</p></td> <td><div class="dragdropsmallbox" id="a10">1234567890</div></td> <td><div class="dragdropsmallbox" id="a10">f.d@acme.com</div></td> </tr> <tr> <td><p>business continuity manager</p></td> <td><div class="dragdropsmallbox" id="a10">2345678901</div></td> <td><div class="dragdropsmallbox" id="a10">b.c.d@acme.com</div></td> </tr> <tr> <td><p>sales manager</p></td> <td><div class="dragdropsmallbox" id="a10">3456789012</div></td> <td><div class="dragdropsmallbox" id="a10">s.m@acme.com</div></td> </tr> <tr> <td><p>production manager</p></td> <td><div class="dragdropsmallbox" id="a10">4567890123</div></td> <td><div class="dragdropsmallbox" id="a10">p.m@acme.com</div></td> </tr> <tr> <td><p>hr director</p></td> <td><div class="dragdropsmallbox" id="a10">5678901234</div></td> <td><div class="dragdropsmallbox" id="a10">h.r.d@acme.com</div></td> </tr> <tr> <td><p>backup manger</p></td> <td><div class="dragdropsmallbox" id="a10">6789012345</div></td> <td><div class="dragdropsmallbox" id="a10">b.m@acme.com</div></td> </tr> <tr> <td><p>power supplier</p></td> <td><div class="dragdropsmallbox" id="a10">7890123456</div></td> <td><div class="dragdropsmallbox" id="a10">p.s@acme.com</div></td> </tr> <tr> <td><p>internet supplier</p></td> <td><div class="dragdropsmallbox" id="a10">8901234567</div></td> <td><div class="dragdropsmallbox" id="a10">i.s@acme.com</div></td> </tr> <tr> <td><p>disaster recovery supplier</p></td> <td><div class="dragdropsmallbox" id="a2">9012345678</div></td> <td><div class="dragdropsmallbox" id="a10">d.r.s@acme.com</div></td> </tr> </table> </main> <!-- page 5 --> <h5 style="color: red; ">page 5</h5> <h2>call tree</h2> <img class="calltree" src="img/call_tree.jpg"> <!-- page 6 --> <h5 style="color: red; ">page 6</h5> <h2>emergency phone message</h2> <p>we have distributed emergency call cards staff, containing number emergency phone line in disaster. should update message alert staff members presence of disastrous event, , every time there change in circumstances - either towards or away resolution.<br> update message call number below:</p> <div class="dragdropsmallbox" id="a4">update emergency phone line</div><br><br> <!-- page 7 --> <h5 style="color: red; ">page 7</h5> <h2>network diagram service information</h2> <main class="flex-center"> <table> <tr> <td><p><strong>service</strong></p></td> <td><p><strong>ip address</strong></p></td> </tr> <tr> <td><p>email</p></td> <td><div class="dragdropsmallbox" id="a10">192.0.0.1</div></td> </tr> <tr> <td><p>web server</p></td> <td><div class="dragdropsmallbox" id="a10">192.0.0.2</div></td> </tr> </tr> <tr> <td><p>mpls</p></td> <td><div class="dragdropsmallbox" id="a10">192.0.0.3</div></td> </tr> <tr> <td><p>voip</p></td> <td><div class="dragdropsmallbox" id="a10">192.0.0.4</div></td> </tr> <tr> <td><p>san server</p></td> <td><div class="dragdropsmallbox" id="a1">192.0.0.5</div></td> </tr> <tr> <td><p>crm server</p></td> <td><div class="dragdropsmallbox" id="a10">192.0.0.6</div></td> </tr> </table> </main> </div> <div id="dragcontent"></div> </div> </div> </div> <div id="buttons"> <input type="button" onclick="dragdropresetform();return false" value="reset"> <input type="button" onclick="clearfields();" id="clear" value="clear"> <input type="button" onclick="showresults();" id="result" value="result"> </div> </body> </html> javascript:
var shufflequestions = true; var shuffleanswers = false; var lockedafterdrag = true; function quizisfinished() { alert('finished!'); } var dragcontentdiv = false; var dragcontent = false; var dragsource = false; var dragdroptimer = -1; var destinationobjarray = new array(); var destination = false; var dragsourceparent = false; var dragsourcenextsibling = false; var answerdiv; var questiondiv; var sourceobjectarray = new array(); var arrayofemptyboxes = new array(); var arrayofanswers = new array(); function gettoppos(inputobj) { if(!inputobj || !inputobj.offsettop)return 0; var returnvalue = inputobj.offsettop; while((inputobj = inputobj.offsetparent) != null)returnvalue += inputobj.offsettop; return returnvalue; } function getleftpos(inputobj) { if(!inputobj || !inputobj.offsetleft)return 0; var returnvalue = inputobj.offsetleft; while((inputobj = inputobj.offsetparent) != null)returnvalue += inputobj.offsetleft; return returnvalue; } function cancelevent() { return false; } function initdragdrop(e) { if(document.all)e = event; if(lockedafterdrag && this.parentnode.parentnode.id=='questiondiv')return; dragcontentdiv.style.left = e.clientx + math.max(document.documentelement.scrollleft,document.body.scrollleft) + 'px'; dragcontentdiv.style.top = e.clienty + math.max(document.documentelement.scrolltop,document.body.scrolltop) + 'px'; dragsource = this; dragsourceparent = this.parentnode; dragsourcenextsibling = false; if(this.nextsibling)dragsourcenextsibling = this.nextsibling; if(!dragsourcenextsibling.tagname)dragsourcenextsibling = dragsourcenextsibling.nextsibling; dragdroptimer=0; timeoutbeforedrag(); return false; } function timeoutbeforedrag(){ if(dragdroptimer>=0 && dragdroptimer<10){ dragdroptimer = dragdroptimer +1; settimeout('timeoutbeforedrag()',10); return; } if(dragdroptimer>=10){ dragcontentdiv.style.display='block'; dragcontentdiv.innerhtml = ''; dragcontentdiv.appendchild(dragsource); } } function dragdropmove(e) { if(dragdroptimer<10){ return; } if(document.all)e = event; var scrolltop = math.max(document.documentelement.scrolltop,document.body.scrolltop); var scrollleft = math.max(document.documentelement.scrollleft,document.body.scrollleft); dragcontentdiv.style.left = e.clientx + scrollleft + 'px'; dragcontentdiv.style.top = e.clienty + scrolltop + 'px'; var dragwidth = dragsource.offsetwidth; var dragheight = dragsource.offsetheight; var objfound = false; var mousex = e.clientx + scrollleft; var mousey = e.clienty + scrolltop; destination = false; for(var no=0;no<destinationobjarray.length;no++){ var left = destinationobjarray[no]['left']; var top = destinationobjarray[no]['top']; var width = destinationobjarray[no]['width']; var height = destinationobjarray[no]['height']; destinationobjarray[no]['obj'].classname = 'destinationbox'; var subs = destinationobjarray[no]['obj'].getelementsbytagname('div'); if(!objfound && subs.length==0){ if(mousex < (left/1 + width/1) && (mousex + dragwidth/1) >left && mousey < (top/1 + height/1) && (mousey + dragheight/1) >top){ destinationobjarray[no]['obj'].classname='dragcontentover'; destination = destinationobjarray[no]['obj']; objfound = true; } } } sourceobjectarray['obj'].classname=''; if(!objfound){ var left = sourceobjectarray['left']; var top = sourceobjectarray['top']; var width = sourceobjectarray['width']; var height = sourceobjectarray['height']; if(mousex < (left/1 + width/1) && (mousex + dragwidth/1) >left && mousey < (top/1 + height/1) && (mousey + dragheight/1) >top){ destination = sourceobjectarray['obj']; sourceobjectarray['obj'].classname='dragcontentover'; } } return false; } function dragdropend() { if(dragdroptimer<10){ dragdroptimer = -1; return; } dragcontentdiv.style.display='none'; sourceobjectarray['obj'].style.backgroundcolor = '#fff'; if(destination){ destination.appendchild(dragsource); destination.classname='destinationbox'; if(!destination.id || destination.id!='answerdiv'){ var previousel = dragsource.parentnode.previoussibling; if(!previousel.tagname)previousel = previousel.previoussibling; var numericid = previousel.id.replace(/[^0-9]/g,''); var numericidsource = dragsource.id.replace(/[^0-9]/g,''); if(numericid==numericidsource){ dragsource.classname='correctanswer'; checkallanswers(); } else dragsource.classname='wronganswer'; } if(destination.id && destination.id=='answerdiv'){ dragsource.classname='dragdropsmallbox'; } } else{ if(dragsourcenextsibling) dragsourcenextsibling.parentnode.insertbefore(dragsource,dragsourcenextsibling); else dragsourceparent.appendchild(dragsource); } if(numericid==numericidsource) { document.getelementbyid('feedback').innerhtml = ""; document.getelementbyid('feedback').innerhtml += 'correct answer!'; } else { document.getelementbyid('feedback').innerhtml = ""; document.getelementbyid('feedback').innerhtml += 'incorrect answer! have tried this...'; incrementscore(); } dragdroptimer = -1; dragsourcenextsibling = false; dragsourceparent = false; destination = false; } function checkallanswers() { for(var no=0;no<arrayofemptyboxes.length;no++){ var sub = arrayofemptyboxes[no].getelementsbytagname('div'); if(sub.length==0)return; if(sub[0].classname!='correctanswer'){ return; } } quizisfinished(); } function resetpositions() { if(dragdroptimer>=10)return; for(var no=0;no<destinationobjarray.length;no++){ if(destinationobjarray[no]['obj']){ destinationobjarray[no]['left'] = getleftpos(destinationobjarray[no]['obj']) destinationobjarray[no]['top'] = gettoppos(destinationobjarray[no]['obj']) } } sourceobjectarray['left'] = getleftpos(answerdiv); sourceobjectarray['top'] = gettoppos(answerdiv); } function initdragdropscript() { dragcontentdiv = document.getelementbyid('dragcontent'); answerdiv = document.getelementbyid('answerdiv'); answerdiv.onselectstart = cancelevent; var divs = answerdiv.getelementsbytagname('div'); var answers = new array(); for(var no=0;no<divs.length;no++){ if(divs[no].classname=='dragdropsmallbox'){ divs[no].onmousedown = initdragdrop; answers[answers.length] = divs[no]; arrayofanswers[arrayofanswers.length] = divs[no]; } } if(shuffleanswers){ for(var no=0;no<(answers.length*10);no++){ var randomindex = math.floor(math.random() * answers.length); answerdiv.appendchild(answers[randomindex]); } } sourceobjectarray['obj'] = answerdiv; sourceobjectarray['left'] = getleftpos(answerdiv); sourceobjectarray['top'] = gettoppos(answerdiv); sourceobjectarray['width'] = answerdiv.offsetwidth; sourceobjectarray['height'] = answerdiv.offsetheight; questiondiv = document.getelementbyid('questiondiv'); questiondiv.onselectstart = cancelevent; var divs = questiondiv.getelementsbytagname('div'); var questions = new array(); var questionsopenboxes = new array(); for(var no=0;no<divs.length;no++){ if(divs[no].classname=='destinationbox'){ var index = destinationobjarray.length; destinationobjarray[index] = new array(); destinationobjarray[index]['obj'] = divs[no]; destinationobjarray[index]['left'] = getleftpos(divs[no]) destinationobjarray[index]['top'] = gettoppos(divs[no]) destinationobjarray[index]['width'] = divs[no].offsetwidth; destinationobjarray[index]['height'] = divs[no].offsetheight; questionsopenboxes[questionsopenboxes.length] = divs[no]; arrayofemptyboxes[arrayofemptyboxes.length] = divs[no]; } if(divs[no].classname=='dragdropsmallbox'){ questions[questions.length] = divs[no]; } } if(shufflequestions){ for(var no=0;no<(questions.length*10);no++){ var randomindex = math.floor(math.random() * questions.length); questiondiv.appendchild(questions[randomindex]); questiondiv.appendchild(questionsopenboxes[randomindex]); destinationobjarray[destinationobjarray.length] = destinationobjarray[randomindex]; destinationobjarray.splice(randomindex,1); questionsopenboxes[questionsopenboxes.length] = questionsopenboxes[randomindex]; questionsopenboxes.splice(randomindex,1); questions[questions.length] = questions[randomindex]; questions.splice(randomindex,1); } } questiondiv.style.visibility = 'visible'; answerdiv.style.visibility = 'visible'; document.documentelement.onmouseup = dragdropend; document.documentelement.onmousemove = dragdropmove; settimeout('resetpositions()',150); window.onresize = resetpositions; } function incrementscore(){ counter = document.getelementbyid('counter'); counter.innerhtml++; } function showresults() { result = document.getelementbyid('result'); if(counter.innerhtml < 2){ result.innerhtml += 'well done!'; } else { result.innerhtml += 'not great!'; } } /* reset form */ function dragdropresetform() { for(var no = 0; no < arrayofanswers.length; no++){ arrayofanswers[no].classname='dragdropsmallbox' answerdiv.appendchild(arrayofanswers[no]); } document.getelementbyid('score').innerhtml = ""; } function clearfields() { document.getelementbyid("questiondiv").innerhtml = ""; } window.onload = initdragdropscript; 
i suggest use jqueryui draggable , droppable interactions achieve want. contain many methods , events can use, example can disable droppable object using $( ".selector" ).droppable( "disable" );. can save trouble of creating methods dragging elements.
Comments
Post a Comment