Carbon Member
Posts : 12 Join date : 2011-03-09
| Subject: Show/Hide based on Criterion Thu Mar 10, 2011 12:23 am | |
| Hello, I'm using the code below to try and create a quiz with inputs. If the user gets the question correct, it should print "correct"; if the user gets the question incorrect, it should print Incorrect. The way I'm approaching it, is I'm trying to just show the associated span tag for a given input, based on whether they match the correct answer. Right now, however, "Incorrect" always pops out. Any help would be appreciated! - Code:
-
<script language="javascript1.2">
function showAnswer(blurred,response) { var form = blurred.form; var rbs = form[blurred.name]; for ( var r = 0; r < rbs.length; ++r ) { var rb = rbs[r]; var lbl = rb.parentNode; var ans = lbl.getElementsByTagName("span"); ans[0].style.display = ( (rb == blurred) && (response == "correct")) ? "inline" : "none"; ans[1].style.display = ( (rb == blurred) && (response == "incorrect")) ? "inline" : "none"; } }
window.onload = function() { var answers = new Array("13","10.8","9.8","10.8","13.8","-5.8","-8.8","-9.8","-8.8","-5.8","-13.8"); var inps = document.getElementsByTagName("input"); for ( var i = 0; i < inps.length; ++i ) { inp = inps[i]; correct_answer = answers[i]; var response = "incorrect"; if (inp.value == correct_answer) {response="correct";} if ( inp.type == "text" ) inp.onblur = function() { //Assume Correct showAnswer(this,response); } } } </script>
<form name = "questions"><table class="center_table" width="120" border="1" cellpadding="0" cellspacing="0" summary="looking for a quadratic pattern "> <tr> <td width="30" align="center" scope="col"><span lang="latex">x</span></td> <td align="center" scope="col"><span class="inline_equation" lang="latex">\displaystyle f(x)</span></td> </tr> <tr> <td width="30" align="center">-2</td> <td align="center"><label><input name="answer" type="text" size="3" maxlength="4" /><span> Correct!</span><span> Incorrect!</span></label></td> </tr> <tr> <td width="30" align="center">-1</td> <td align="center"><label><input name="answer" type="text" size="3" maxlength="4" /><span> Correct!</span><span> Incorrect!</span></label></td> </tr> <tr> <td width="30" align="center">0</td> <td align="center"><label><input name="answer" type="text" size="3" maxlength="4" /><span> Correct!</span><span> Incorrect!</span></label></td> </tr> <tr> <td width="30" align="center">1</td> <td align="center"><label><input name="answer" type="text" size="3" maxlength="4" /><span> Correct!</span><span> Incorrect!</span></label></td> </tr> <tr> <td width="30" align="center">2</td> <td align="center"><label><input name="answer" type="text" size="3" maxlength="4" /><span> Correct!</span><span> Incorrect!</span></label></td> </tr></table></form>
|
|
UsernameChange Staff
Posts : 16 Join date : 2011-03-09
| Subject: Re: Show/Hide based on Criterion Thu Mar 10, 2011 12:24 am | |
| Where are the questions?
I see an answers array which I assume contains the correct answers for each question.
What do the -2, -1, 0, 1, 2 numbers in the table cells represent?
|
|
Knowledge Member
Posts : 21 Join date : 2011-03-09
| Subject: Re: Show/Hide based on Criterion Thu Mar 10, 2011 12:25 am | |
| I am assuming the values in the answers array are the correct answers to the corresponding input box in the table..ie.. the correct answer for input box 1 is 13. When you change a value in the input box, either correct or incorrect is displayed in the span next to the input. - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var answers = new Array("13","10.8","9.8","10.8","13.8","-5.8","-8.8","-9.8","-8.8","-5.8","-13.8"); function checkAnswer(obj){ obj.nextSibling.innerHTML = (obj.value == answers[obj.qNum])? 'Correct' : 'Incorrect'; } window.onload = function() { var oAnsInputs = document.getElementById('table1').getElementsByTagName("input"); for(i=0; i < oAnsInputs.length; i++){ oAnsInputs[i].onchange=function(){checkAnswer(this);} oAnsInputs[i].qNum = i; } } </script> </head> <body> <form name = "questions"> <table id="table1" width="150" border="1" cellpadding="0" cellspacing="0"> <tr> <td align="center" scope="col"><span lang="latex">x</span></td> <td align="center" scope="col"><span class="inline_equation" lang="latex">displaystyle f(x)</span></td> </tr> <tr> <td align="center">-2</td> <td align="center"><input name="answer" type="text" size="3" maxlength="4" /><span></span></td> </tr> <tr> <td align="center">-1</td> <td align="center"><input name="answer" type="text" size="3" maxlength="4" /><span></span></td> </tr> <tr> <td align="center">0</td> <td align="center"><input name="answer" type="text" size="3" maxlength="4" /><span></span></td> </tr> <tr> <td align="center">1</td> <td align="center"><input name="answer" type="text" size="3" maxlength="4" /><span></span></td> </tr> <tr> <td align="center">2</td> <td align="center"><input name="answer" type="text" size="3" maxlength="4" /><span></span></td> </tr> </table> </form> </body> </html>
|
|
Sponsored content
| Subject: Re: Show/Hide based on Criterion | |
| |
|