Radio buttons to replace dropdown menu?

[dubman]

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

now I´d 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?

 <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!

[James_Hibbard]

Hi there,

Is something like this going in the right direction?

<!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>

[dubman]

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!

[dubman]

@dubman

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?

<!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?

[James_Hibbard]

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:

<!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

[dubman]

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:

 markIncorrect(answer.parent()); 

complete 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:

 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.

[James_Hibbard]

Well the trigger for someone not having answered anything is this:

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.

[dubman]

Ok, I got it working - hopefully correctly ;o) by adding the following:

  function markQ(el){
        var img = new Image();  // finally I decided to omit the image "Q.jpg"
        img.src = '';
        el.append(img);
      }

And

if(answer.length === 0){
            markQ($(this).find("p"));  

and a reset button:

<input type="reset"  onClick="window.location.reload()"  value="Start again" />

The complete 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>

[James_Hibbard]

Hey, not bad!

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

The first one:

<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.

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

Let me know when that is done and then we can refactor some of the functions.

[dubman]

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

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

[James_Hibbard]

@dubman

I can’t figure out how that code works

Yeah you can

What’s the element we are trying to manipulate?

[dubman]

erm…well…?

$(element).on("reset", function(){
  // do stuff
}   

??

[James_Hibbard]

Nah, reset is the action we want to do, that should go in

function(){ // do stuff }

The element we want to manipulate is the reset button, so:

$("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.

[ralphm]

[ot]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? [/ot]

[dubman]

I´ve been trying to get that code working, but I must be missing something. When I insert the code, the submit button doesn’t work:

$("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?

 <input type="button" value="Reload Page" onClick="window.location.reload()">

Oh yea, I remember you said this isn’t a good solution :o/

[James_Hibbard]

You need to separate the two event handlers:

$("form").on("submit", function(e){
 ...
});

$("input[type=reset]").on("click", function(){
  window.location.reload()
});

Currently the one is nested within the other.

<!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

[dubman]

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?

[James_Hibbard]

@dubman

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

$("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.

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:

<!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>

[dubman]

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!