Easy A
Would you like to react to this message? Create an account in a few clicks or log in to continue.


 
HomeHome  Latest imagesLatest images  SearchSearch  RegisterRegister  Log inLog in  

Easy A :: Show/Hide based on Criterion Edit-trash Useless :: TrashShare
 

 Show/Hide based on Criterion

View previous topic View next topic Go down 
AuthorMessage
Carbon
Member
Member
avatar

Posts : 12
Join date : 2011-03-09

Show/Hide based on Criterion Empty
PostSubject: Show/Hide based on Criterion    Show/Hide based on Criterion EmptyThu 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>
Back to top Go down
UsernameChange
Staff
Staff
avatar

Posts : 16
Join date : 2011-03-09

Show/Hide based on Criterion Empty
PostSubject: Re: Show/Hide based on Criterion    Show/Hide based on Criterion EmptyThu 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?
Back to top Go down
Knowledge
Member
Member
Knowledge

Posts : 21
Join date : 2011-03-09

Show/Hide based on Criterion Empty
PostSubject: Re: Show/Hide based on Criterion    Show/Hide based on Criterion EmptyThu 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>
Back to top Go down
Sponsored content




Show/Hide based on Criterion Empty
PostSubject: Re: Show/Hide based on Criterion    Show/Hide based on Criterion Empty
Back to top Go down
 

Show/Hide based on Criterion

View previous topic View next topic Back to top 
Page 1 of 1

 Similar topics

-
» Making Show/Hide Content Showing and hiding content on mouse click!
» Basic Movie Renamer program based on nfo contents...
» How do I show an image below my username?
» Your all time favorite TV show.

Permissions in this forum:You cannot reply to topics in this forum
Easy A :: Show/Hide based on Criterion Edit-trash Useless :: Trash-