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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 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?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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,892
    Mentioned
    211 Post(s)
    Tagged
    12 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
  •