SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    radio buttons to replace dropdown menu?

    Hi I have a javascript quiz (thanks to Pullo's guidance), and

    now Id like to change to radio buttons with around 3 or 4 options, like for example:

    Join the 2 sentences:

    Mary is English. She was born in London

    Radio buttons: "A". Mary was born in England
    "B" Mary, who is English, was born in London
    "C" English Mary was born in London
    "D" London Mary is English born

    So, I was thinking of around 10 questions in the quiz , with a submit button at the bottom, and a "tick" after correct answers, and "x" after incorrect answers.

    Or, maybe to put it another way, how could I modify the following code, replacing the dropdown menus with radio buttons?

    Code:
     <form action="#" method="post" id="myForm" name="f">
                  <ol>
                    <li>
                I think blue is the colour that  &nbsp;
             
                      <select name="question1">
                        <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                        
                        
                      </select>  
                       I like best.
                    </li>
                    <li>
                      Simon, who &nbsp;
                      
                  
                      <select name="question2">
                       <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                         
                      </select>
                     is 25, got married last week.
              
                    </li>
                    <li>
                     My car has a mechanical problem that / which &nbsp;
                      
                 
                      <select name="question3">
                       <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                      </select> 
                       is expensive to repair.
                    </li>
                    <li>
                  He left the keys that &nbsp;
                   
                
                      <select name="question4">
                       <option value="na"> </option>
                       <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                      </select> 
                     I gave him on the table.
                    </li>
                    <li>
                     The carpenter who / that  &nbsp;
                     
                    
                      <select name="question5">
                       <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                          
                          
                      </select> 
                        made my furniture is very rich.
                    </li>
                    <li>
                    
                    He took a plane that  &nbsp;
                      <select name="question6">
                       <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                            
                      </select> 
                 left from London.
                    
                    </li>
                    <li>
                    The money that / which  &nbsp;
                      <select name="question7">
                     <option value="na"> </option>
                        <option value="a"> optional </option>   
                        <option value="b"> necessary</option> 
                      </select> 
                    you borrowed was not really necessary.
                    </li>
                    <li>
                          James is the most honest person that &nbsp;
                      <select name="question8">
                       <option value="na"> </option>
                         <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                         
                      </select> 
                       I've ever met.  
                    </li>
                    <li>
                   They're the people who /that &nbsp;
                      <select name="question9">
                       <option value="na"> </option>
                     <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                      </select> 
                             live next door.
                    </li>
                    <li>
                The idea, which &nbsp;
                      <select name="question10">
                      <option value="na"> </option>
                         <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                          
                      </select> 
                  was very original, has been accepted.
                    </li>
                    
                    <li>
               The book that / which &nbsp;
                      <select name="question11">
                      <option value="na"> </option>
                         <option value="a"> optional </option>   
                        <option value="b"> necessary</option>
                          
                      </select> 
                I bought is very interesting.
                    </li>
                  </ol>
                
                 
                  <div id="buttons">
                 <input type="submit" id="submit" value="Result" />
                  <input type="reset" class="reset" id="reset" name="reset" value="Start again" /> 
                </form>  </div>  </div> 
                 <div id="score"></div> 
                   <div class="address">
    
    
    
    
    
      John Kelly &copy; 2006 - 2013
            
    </div>
              </div> 
            </div> 
          </div> 
        </div>
        
        
        
        
        
        
     <script>
          Object.size = function(obj) {
            var size = 0, key;
            for (key in obj) {
              if (obj.hasOwnProperty(key)) size++;
            }
            return size;
          };
          
          (function(){
            "use strict";
            window.checkAnswers = function(opts){
              
              function validateInput(){
                var question,
                    answer;
                    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    answer = f.elements[question].options[f.elements[question].selectedIndex].value;
                    if(answer === "na"){
                      opts[question].state = "not-filled-in";
                    } else if(answer === opts[question].answer){
                      opts[question].state = "correct";
                    } else {
                      opts[question].state = "error";
                    }
                  }
                }
              }
              
              function markCorrectOrIncorrect(){
                var question, 
                    li;
                
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    var img = new Image(),
                    li = f.elements[question].parentElement,
                    feedbackImg = li.getElementsByTagName('img')[0];
    
                    if (feedbackImg){
                      li.removeChild(feedbackImg);
                    }
                    
                    if(opts[question].state === "correct"){
                      img.src = "http://www.littletherese.com/tick.jpg";
                      li.appendChild(img)
                    } else if(opts[question].state === "error"){
                      img.src = "http://www.littletherese.com/x.jpg";
                      li.appendChild(img)
                    }
                  }
                }
              }
              
              function displayScore(){
                var correct = 0,
                    error = 0,
                    score = document.getElementById("score"),
                    totalQuestions = Object.size(opts),
                    question;
    
                for (question in opts) {
                  if(opts.hasOwnProperty(question)) {
                    if(opts[question].state === "correct"){
                      correct ++
                    } else if(opts[question].state === "error"){
                      error ++
                    }
                  }
                }
                score.innerHTML = "You got " + correct + " out of " + totalQuestions;
              }
              
              function init(){
                validateInput();
                markCorrectOrIncorrect();
                displayScore();
              }
              
              init();
            }
          }());
    
          f.onsubmit = function(){
            checkAnswers({
            question1: {answer: "a"},
              question2: {answer: "b"},
              question3: {answer: "b"},
              question4: {answer: "a"},
              question5: {answer: "b"},
              question6: {answer: "b"},
              question7: {answer: "a"},
              question8: {answer: "a"},
              question9: {answer: "b"},
              question10: {answer: "b"},
              question11: {answer: "a"},
            })
            return false;
          }
          
          f.reset.onclick = function(){
            location.reload();
          }
        </script> 
      </body>
    </html>
    Thanks for any help!

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Is something like this going in the right direction?

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
      <body>
        <form>  
          <p>
            Mary is English. She was born in London
            <span id="result"></span>
          </p>
    
          <label><input type="radio" name="question_one" value="a">Mary was born in England</label><br />
          <label><input type="radio" name="question_one" value="b">Mary, who is English, was born in London</label><br />
          <label><input type="radio" name="question_one" value="c">English Mary was born in London</label><br />
          <label><input type="radio" name="question_one" value="d">London Mary is English born</label><br /><br />
    
          <input type="submit" />
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          $("form").on("submit", function(e){
            e.preventDefault();
    
            var answer_one = $("input[name='question_one']:checked").val();
    
            if (answer_one === "b"){
              $("#result").html("<img src='http://www.littletherese.com/tick.jpg' />")
            } else {
              $("#result").html("<img src='http://www.littletherese.com/x.jpg' />")
            }
          })
        </script>
      </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great! I'd definitely settle for that! I was just wondering if there might be a way to show the "correct tick" next to the actual sentence that is correct "Mary, who is English, was born in London" , as opposed to being next to the question? Thanks!

  4. #4
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dubman View Post
    That's great! I'd definitely settle for that! I was just wondering if there might be a way to show the "correct tick" next to the actual sentence that is correct "Mary, who is English, was born in London" , as opposed to being next to the question? Thanks!
    Would the following be the correct way to extend the script to more than one question?
    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
      <body>
        <form>  
          <p>
            Mary is English. She was born in London
            <span id="result"></span>
          </p>
    
          <label><input type="radio" name="question_one" value="a">Mary was born in England</label><br />
          <label><input type="radio" name="question_one" value="b">Mary, who is English, was born in London</label><br />
          <label><input type="radio" name="question_one" value="c">English Mary was born in London</label><br />
          <label><input type="radio" name="question_one" value="d">London Mary is English born</label><br /><br /> 
          
           <p>
            Mary is English. She was born in London
            <span id="result_2"></span>
          </p>
          
            <label><input type="radio" name="question_two" value="a">Mary was born in England</label><br />
          <label><input type="radio" name="question_two" value="b">Mary, who is English, was born in London</label><br />
          <label><input type="radio" name="question_two" value="c">English Mary was born in London</label><br />
          <label><input type="radio" name="question_two" value="d">London Mary is English born</label><br /><br /> 
    
          <input type="submit" />
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          $("form").on("submit", function(e){
            e.preventDefault();
    
            var answer_one = $("input[name='question_one']:checked").val();
    
            if (answer_one === "b"){
              $("#result").html("<img src='http://www.littletherese.com/tick.jpg' />")
            } else {
              $("#result").html("<img src='http://www.littletherese.com/x.jpg' />")
            }
            var answer_two = $("input[name='question_two']:checked").val();
              if (answer_two === "b"){
              $("#result_2").html("<img src='http://www.littletherese.com/tick.jpg' />")
            } else {
              $("#result_2").html("<img src='http://www.littletherese.com/x.jpg' />")
            }
          })
          
       
        </script>
      </body>
    </html>
    It seems to work for me, but I'm wondering if I'm on the right track?

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    I'm glad your starting to think about how to make things more generic.
    That's cool

    Here's how you might do it:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Quiz with radio buttons</title>
        <style>
          label{ display: block; }
          input[type=submit]{ margin-top: 15px; }
        </style>
      </head>
    
      <body>
        <form> 
          <div class="question">
            <p><strong>Q1</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="one" value="a">Mary was born in England</label>
            <label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="one" value="c">English Mary was born in London</label>
            <label><input type="radio" name="one" value="d">London Mary is English born</label>
          </div>
    
          <div class="question"> 
            <p><strong>Q2</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="two" value="a">Mary was born in England</label>
            <label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="two" value="c">English Mary was born in London</label>
            <label><input type="radio" name="two" value="d">London Mary is English born</label>
          </div>
    
          <input type="submit" />
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          function clearAnswers(){
            $("img").each(function(){
              $(this).remove();
            })
          }
    
          function markIncorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/x.jpg';
            el.append(img);
          }
    
          function markCorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/tick.jpg';
            el.append(img);
          }
    
          $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswers();
    
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    
              if(answer.length === 0){
                markIncorrect($(this).find("p"));
              } else if (answers[key] !== val){
                markIncorrect($(this).find("p"));
              } else {
                markCorrect(answer.parent());
              }
            });
          });
          
          var answers = {
            "one": "a",
            "two": "b"
          }
        </script>
      </body>
    </html>
    Fiddle

  6. #6
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    madre mia...that code looks a bit more complicated ;o)

    I made a small change so as to get the incorrect answers marked with an "x" , next to the relevent answer, in this line:
    Code:
     markIncorrect(answer.parent());
    complete code:
    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Quiz with radio buttons</title>
        <style>
          label{ display: block; }
          input[type=submit]{ margin-top: 15px; }
        </style>
      </head>
    
      <body>
        <form> 
          <div class="question">
            <p><strong>Q1</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="one" value="a">Mary was born in England</label>
            <label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="one" value="c">English Mary was born in London</label>
            <label><input type="radio" name="one" value="d">London Mary is English born</label>
          </div>
    
          <div class="question"> 
            <p><strong>Q2</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="two" value="a">Mary was born in England</label>
            <label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="two" value="c">English Mary was born in London</label>
            <label><input type="radio" name="two" value="d">London Mary is English born</label>
          </div>
    
          <input type="submit" />
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          function clearAnswers(){
            $("img").each(function(){
              $(this).remove();
            })
          }
    
          function markIncorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/x.jpg';
            el.append(img);
          }
    
          function markCorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/tick.jpg';
            el.append(img);
          }
    
          $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswers();
    
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    
              if(answer.length === 0){
                markIncorrect($(this).find("p"));
              } else if (answers[key] !== val){
                markIncorrect(answer.parent());   // I  changed this line
              } else {
                markCorrect(answer.parent());
              }
            });
          });
          
          var answers = {
            "one": "a",
            "two": "b"
          }
        </script>
      </body>
    </html>
    But now I'd like, if possible, to add something similar to this:
    Code:
     if (answer  != "a" && !="b" && !="c"){
     $("#result").html("<img src='http://www.littletherese.com/q.jpg' />");
            }
    The idea being that if someone clicks "Results" without answering any questions, a question mark image would show next to all the questions, instead of the incorrect mark "x", which shows at present. How would I go about this? Thanks.

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Well the trigger for someone not having answered anything is this:

    Code:
    if(answer.length === 0){
      // This code will fire for every question where the user has not selected anything
    }
    I would hook into that and append the question mark as desired.

  8. #8
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got it working - hopefully correctly ;o) by adding the following:

    Code:
      function markQ(el){
            var img = new Image();  // finally I decided to omit the image "Q.jpg"
            img.src = '';
            el.append(img);
          }
    And
    Code:
    if(answer.length === 0){ 
                markQ($(this).find("p"));
    and a reset button:
    Code:
    <input type="reset"  onClick="window.location.reload()"  value="Start again" />
    The complete code:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Quiz with radio buttons</title>
        <style>
          label{ display: block; }
          input[type=submit]{ margin-top: 15px; }
        </style>
      </head>
    
      <body>
        <form> 
          <div class="question">
            <p><strong>Q1</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="one" value="a">Mary was born in England</label>
            <label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="one" value="c">English Mary was born in London</label>
            <label><input type="radio" name="one" value="d">London Mary is English born</label>
          </div>
    
          <div class="question"> 
            <p><strong>Q2</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="two" value="a">Mary was born in England</label>
            <label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="two" value="c">English Mary was born in London</label>
            <label><input type="radio" name="two" value="d">London Mary is English born</label>
          </div>
    
          <input type="submit" />
          <input type="reset"  onClick="window.location.reload()"  value="Start again" /> 
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          function clearAnswers(){
            $("img").each(function(){
              $(this).remove();
            })
          }
    
          function markIncorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/x.jpg';
            el.append(img);
          }
    
          function markCorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/tick.jpg';
            el.append(img);
          } 
            function markQ(el){
            var img = new Image(); // Finally I decided to omit the image "Q.jpg"
            img.src = '';
            el.append(img);
          } 
          $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswers();
    
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    
              if(answer.length === 0){ 
                markQ($(this).find("p"));
              } else if (answers[key] !== val){
                markIncorrect(answer.parent());   // I  changed this line
              } else {
                markCorrect(answer.parent());
              } 
            });
          });
          
          var answers = {
            "one": "b",
            "two": "b"
          }
        </script>
      </body>
    </html>

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hey, not bad!

    There are a couple of things to tidy up now though.

    The first one:

    Code:
    <input type="reset"  onClick="window.location.reload()"  value="Start again" />
    Inline event handlers, like these are ugly and difficult to maintain if you have more than a few of them.

    Try and get a reference to the button and attach an event handler from within your JS.

    e.g.

    Code:
    $(element).on("event", function(){
      // do stuff
    }
    Let me know when that is done and then we can refactor some of the functions.

  10. #10
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea, I would prefer a cleaner reset button, but... sorry, I can't figure out how that code works...or how to activate it with the html reset button

    Code:
    $(element).on("event", function(){
      // do stuff
    }

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by dubman View Post
    I can't figure out how that code works
    Yeah you can

    What's the element we are trying to manipulate?

  12. #12
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    erm...well...?
    Code:
    $(element).on("reset", function(){
      // do stuff
    }
    ??

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Nah, reset is the action we want to do, that should go in

    Code:
    function(){ // do stuff }
    The element we want to manipulate is the reset button, so:

    Code:
    $("input[type=reset]").on("click", function(){
      window.location.reload()
    }
    Would be what we are after.

    As mentioned there are a few more improvements we can make.
    I'll post a bit more later.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,622
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Off Topic:

    I'd say that "Mary was born in England" is true. So I hope you will make the rules nice and clear.

    Presumably you want the user to choose a sentence that rephrases all of the information given?

  15. #15
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive been trying to get that code working, but I must be missing something. When I insert the code, the submit button doesn't work:

    Code:
    $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswers();
    
            $("input[type=reset]").on("click", function(){
      window.location.reload()
    }
         
            
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    But, I see that just altering the reset button, as below, does reload the page - but not the recommended method?

    Code:
     <input type="button" value="Reload Page" onClick="window.location.reload()">
    Oh yea, I remember you said this isn't a good solution /

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    You need to separate the two event handlers:

    Code:
    $("form").on("submit", function(e){
     ...
    });
    
    $("input[type=reset]").on("click", function(){
      window.location.reload()
    });
    Currently the one is nested within the other.

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Quiz with radio buttons</title>
        <style>
          label{ display: block; }
          input[type=submit]{ margin-top: 15px; }
        </style>
      </head>
    
      <body>
        <form> 
          <div class="question">
            <p><strong>Q1</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="one" value="a">Mary was born in England</label>
            <label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="one" value="c">English Mary was born in London</label>
            <label><input type="radio" name="one" value="d">London Mary is English born</label>
          </div>
    
          <div class="question"> 
            <p><strong>Q2</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="two" value="a">Mary was born in England</label>
            <label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="two" value="c">English Mary was born in London</label>
            <label><input type="radio" name="two" value="d">London Mary is English born</label>
          </div>
    
          <input type="submit" />
          <input type="reset" value="Start again" /> 
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          function clearAnswers(){
            $("img").each(function(){
              $(this).remove();
            })
          }
    
          function markIncorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/x.jpg';
            el.append(img);
          }
    
          function markCorrect(el){
            var img = new Image();
            img.src = 'http://www.littletherese.com/tick.jpg';
            el.append(img);
          } 
            function markQ(el){
            var img = new Image(); // Finally I decided to omit the image "Q.jpg"
            img.src = '';
            el.append(img);
          }
          
          $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswers();
    
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    
              if(answer.length === 0){ 
                markQ($(this).find("p"));
              } else if (answers[key] !== val){
                markIncorrect(answer.parent());   // I  changed this line
              } else {
                markCorrect(answer.parent());
              } 
            });
          });
    
          $("input[type=reset]").on("click", function(){
            window.location.reload()
          });
    
          var answers = {
            "one": "b",
            "two": "b"
          }
        </script>
      </body>
    </html>
    I'll post the rest later

  17. #17
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah good, now it's reloading the page correctly. Actually I had been wondering if there might be a javascript way to erase the answers without having to reload the page?

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by dubman View Post
    Actually I had been wondering if there might be a javascript way to erase the answers without having to reload the page?
    Now you're talking

    Code:
    $("input[type=reset]").on("click", function(){
      $("input:checked").each(function(){
        $(this).prop("checked", false);
      });
    
      clearAnswerImages();
    });
    I have renamed the function clearAnswers to clearAnswerImages as a clear indication of what it does.

    We also have quite a lot of duplicated code in our "markWhatever" functions.
    As a second step, let's turn the three functions into one and pass it two parameters: the element to mark, the way to mark it.

    Code:
    function mark(el, status){
      var images = {
        correct: "http://www.littletherese.com/tick.jpg",
        incorrect: "http://www.littletherese.com/x.jpg",
        unanswered: "http://www.littletherese.com/Q.jpg",
      }, 
      img = new Image();
      img.src = images[status];
      el.append(img);
    }
    Here's everything put together:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Quiz with radio buttons</title>
        <style>
          label{ display: block; }
          input[type=submit]{ margin-top: 15px; }
        </style>
      </head>
    
      <body>
        <form> 
          <div class="question">
            <p><strong>Q1</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="one" value="a">Mary was born in England</label>
            <label><input type="radio" name="one" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="one" value="c">English Mary was born in London</label>
            <label><input type="radio" name="one" value="d">London Mary is English born</label>
          </div>
    
          <div class="question"> 
            <p><strong>Q2</strong>: Mary is English. She was born in London</p>
    
            <label><input type="radio" name="two" value="a">Mary was born in England</label>
            <label><input type="radio" name="two" value="b">Mary, who is English, was born in London</label>
            <label><input type="radio" name="two" value="c">English Mary was born in London</label>
            <label><input type="radio" name="two" value="d">London Mary is English born</label>
          </div>
    
          <input type="submit" />
          <input type="reset" value="Start again" /> 
        </form>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          function clearAnswerImages(){
            $("img").each(function(){
              $(this).remove();
            })
          }
    
          function mark(el, status){
            var images = {
              correct: "http://www.littletherese.com/tick.jpg",
              incorrect: "http://www.littletherese.com/x.jpg",
              unanswered: "http://assets.altperks.com/shared/images/clickable/questionmark-15x15.gif",
            }, 
            img = new Image();
            img.src = images[status];
            el.append(img);
          }
    
          $("form").on("submit", function(e){
            e.preventDefault();
            clearAnswerImages();
    
            $questions = $(".question");
            $questions.each(function(){
              var answer = $(this).find("input:checked"),
                  key = answer.attr("name"),
                  val = answer.attr("value");
    
              if(answer.length === 0){ 
                mark($(this).find("p"), "unanswered");
              } else if (answers[key] !== val){
                mark(answer.parent(), "incorrect");   // I  changed this line
              } else {
                mark(answer.parent(), "correct");
              } 
            });
          });
    
          $("input[type=reset]").on("click", function(){
            $("input:checked").each(function(){
              $(this).prop("checked", false);
            });
    
            clearAnswerImages();
          });
    
          var answers = {
            "one": "b",
            "two": "b"
          }
        </script>
      </body>
    </html>

  19. #19
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's excellent! To answer Ralph.m, these questions are just examples, but the correct answer is: "Mary, who is English, was born in London. I *really appreciate the help. Thanks so much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •