See the complete list of activities at the bottom of the page.

proverbs [compound sentences] [2]

proverbs [compound sentences] [2]/title> <style type="text/css"> /* DEMO CSS */ body{ width:100%; margin:0px; padding:0px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; font-size:13px; /* Font to use */ text-indent: 0px; cursor:pointer; } #heading{ height:0px; } /* END DEMO CSS */ /* OUTSIDE FRAME*/ #dragScriptContainer{ width:760px; margin:0 auto; border:2px solid black; height:280px; margin-top:10px; margin-bottom:10px; padding:20px; background-color:lightgray; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } /* FRAME FOR LEFT TWO COLUMNS */ #questionDiv{ float:left; height:200px; width:500px; border:0px solid black; padding:4px; text-align:; visibility:hidden; /* Don't change this */ font-size:13px; } /* FRAME FOR RIGHT HAND COLUMN */ #answerDiv{ float:right; width:236px; border:0px solid black; background-color:transparent; padding-left:2px; visibility:hidden; /* Don't change this */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size:13px; } /* RULES OF FRAMES 1 & 3*/ #questionDiv div,#answerDiv div,#dragContent div{ width:230px; height:20px; float:left; margin-right:2px; margin-bottom:2px; text-align:center; border:2px solid black; background-color:transparent; font-size:13px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /* Drag content div - i.e. specific answers when they are being dragged */ #dragContent div{ border:1px solid black; background-color:transparent; } /* RIGHT HAND FRAME */ #answerDiv .dragDropSmallBox{ border:2px solid black; cursor:pointer; background-color:orange; text-align:center; padding-left:1px; font-size:15px; width:230px; height:22px; color:white; } /* LEFT HAND FRAME */ #questionDiv .dragDropSmallBox{ border:2px solid black; cursor:pointer; background-color:blue; text-align:center; padding-right:1px; font-size:16px; width:230px; color:white; } /* DIV after it has been dragged from right to left box */ #questionDiv div div{ margin:0px; border:0px; padding:0px; background-color:transparent; font-size:16px; } /* CENTRAL COLUMN*/ #questionDiv .destinationBox{ border:1px solid gray; background-color:transparent; width:230px; height:22px; cursor:pointer; } /* CORRECT ANSWER */ #questionDiv .correctAnswer{ background-color:yellow; color:black; font-weight:; border:0px solid black; width:230px; height:22px; text-align:center; font-size:16px; } /* WRONG ANSWER */ #questionDiv .wrongAnswer{ background-color:yellow; color:black; font-weight:; border:0px solid black; width:230px; height:22px; text-align:center; font-size:16px; } #dragContent div{ background-color:transparent; } /* NO IDEA*/ #questionDiv .dragContentOver{ border:px solid blue; background-color:transparent; } /* NO IDEA*/ #answerDiv.dragContentOver{ border:0px solid black; background-color:transparent; } #dragContent{ /* image */ position:absolute; width:150px; height:15px; display:none; margin-top:-1450px; /* - takes picture up to pointer */ margin-left:-1250px; /* - takes picture right to pointer */ padding:0px; z-index:2000; cursor:pointer; } </style> <script type="text/javascript"> /************************************************************************************************************ (C) www.dhtmlgoodies.com, November 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland ************************************************************************************************************/ var shuffleQuestions = true; /* Shuffle questions ? */ var shuffleAnswers = true; /* Shuffle answers ? */ var lockedAfterDrag = false; /* Lock items after they have been dragged, i.e. the user get's only one shot for the correct answer */ function quizIsFinished() { // This function is called when everything is solved } /* Don't change anything below here */ 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'; // Check if position is correct, i.e. correct answer to the question 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); } 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; } /* Reset the form */ function dragDropResetForm() { for(var no=0;no<arrayOfAnswers.length;no++){ arrayOfAnswers[no].className='dragDropSmallBox' answerDiv.appendChild(arrayOfAnswers[no]); } } window.onload = initDragDropScript; </script> </head> <body> <div id="dragScriptContainer"> <div id="questionDiv"> <div class="dragDropSmallBox" id="q1">A new broom... </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q2">A nod's as good as a wink .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q3">A picture paints .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q4">A place for everything .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q5">A poor workman .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q6">A problem shared .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q7">A rolling stone .. </div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q8">A stitch in time ..</div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q9">A volunteer is worth ..</div> <div class="destinationBox"></div> <div class="dragDropSmallBox" id="q10">A watched pot .. </div> <div class="destinationBox"></div> </div> <div id="answerDiv"> <div class="dragDropSmallBox" id="a1">..sweeps clean.</div> <div class="dragDropSmallBox" id="a2">..to a blind horse.</div> <div class="dragDropSmallBox" id="a3">..a thousand words.</div> <div class="dragDropSmallBox" id="a4">..and everything in its place.</div> <div class="dragDropSmallBox" id="a5">..always blames his tools.</div> <div class="dragDropSmallBox" id="a6">..is a problem halved.</div> <div class="dragDropSmallBox" id="a7">..gathers no moss.</div> <div class="dragDropSmallBox" id="a8">..saves nine.</div> <div class="dragDropSmallBox" id="a9">..twenty pressed men.</div> <div class="dragDropSmallBox" id="a10">..never boils.</div> </div> </div> <div id="dragContent"></div> </body> </html> <html> <title>[News Flash]
Look at the part sentences in the left hand column. Look at the connecting part sentences in the right hand column. Drag the part sentence from the right hand column into the central column next to the connecting part sentence. A change of background colour to yellow means that the answer is correct. To restart the activity just refresh the page.


learning can be FUN and EDUCATIONAL :