-1

I am new to programming currently, to deal with passing out the values. I am creating a small question to help with my programming skills. I want to collect multiple values from drop downs and print them out to display to the user as shown. I do not know how to structure the javascript for the correct outcome.Help is much appreciated .

myTimer = setTimeout('alert("Time out")', 600000); /*alert will appear after 60 second*/

function processMyForm(frm) {
  var chosenans1 = getRadioValue(frm.answer1);
  var a1;

  var chosenans2 = document.getElementById(frm.answer2).value;
  var a2;

  var chosenans3 = getRadioValue(frm.answer3);
  var a3;

  var chosenans4 = document.getElementById(frm.answer4).value;
  var a4;

  var chosenans5 = getRadioValue(frm.answer5);
  var a5;
  var chosenans6 = getRadioValue(frm.answer6);
  var a6;

  // ----------------------------

  var total;

  // --------------------------------

  if (chosenans1 == "England") /*if radio value of answer1 is "England"*/ {
    a1 = 2; /*correct answer for 2 marks*/
    document.getElementById("result1").innerHTML = ("<span class='correct'>Your answer to question 1 is correct.</span> "); /*print out correct at bottom of the page at <div id = "result1">*/
  } else {
    a1 = -1; /*incorrect answer for -1 mark*/
    document.getElementById("result1").innerHTML = ("<span class='incorrect'>The correct answer to question 1 is 'England'.</span>"); /*print out incorrect at <div id = "result1">*/
  }

  // ---------------------

  if (chosenans2 == "Stonehenge") {
    a2 = 2;
    document.getElementById("result2").innerHTML = ("<span class='correct'>Your answer to question 2 is correct.</span>");
  } else {
    a2 = -1;
    document.getElementById("result2").innerHTML = ("<span class='incorrect'>The correct answer to question 2 is 'Stonehenge'.</span>");
  }

  // -------------------

  if (chosenans3 == "2012") {
    a3 = 2;
    document.getElementById("result3").innerHTML = ("<span class='correct'>Your answer to question 3 is correct.</span>");
  } else {
    a3 = -1;
    document.getElementById("result3").innerHTML = ("<span class='incorrect'>The correct answer to question 3 is '2012'.</span>");
  }

  // ---------------------

  if (chosenans4 == "River Thames") {
    a4 = 2;
    document.getElementById("result4").innerHTML = ("<span class='correct'>Your answer to question 4 is correct.</span>");
  } else {
    a4 = -1;
    document.getElementById("result4").innerHTML = ("<span class='incorrect'>The correct answer to question 4 is 'River Thames'.</span>");
  }

  // -------------------------

  if (chosenans5 == "Pound") {
    a5 = 2;
    document.getElementById("result5").innerHTML = ("<span class='correct'>Your answer to question 5 is correct.</span>");
  } else {
    a5 = -1;
    document.getElementById("result5").innerHTML = ("<span class='incorrect'>The correct answer to question 5 is 'Pound'.</span>");
  }

  if (chosenans6 == "David Cameron") {
    a6 = 2;
    document.getElementById("result6").innerHTML = ("<span class='correct'>Your answer to question 6 is correct.</span>");
  } else {
    a6 = -1;
    document.getElementById("result6").innerHTML = ("<span class='incorrect'>The correct answer to question 6 is 'David Cameron'.</span>");
  }

  // --------------------------------------------------------

  total = a1 + a2 + a3 + a4 + a5 + a6; /*add marks(2 or -1) together*/

  document.getElementById("result").innerHTML = ("Your mark is " + total); //print out your total mark at <div id = "result">
  alert("Your mark is " + total); //prompt total mark in small window

  if (total < 8) {
    document.body.style.backgroundImage = "none"; //remove background image
    document.body.style.backgroundColor = "#bb0000"; //add a background colour
  } else {
    document.body.style.backgroundImage = "none";
    document.body.style.backgroundColor = "#006600";
  }

  clearTimeout(myTimer); //stop timer
}


function getValue(qArray) { //get value from radio array
    var i;
    for (i = 0; i < qArray.length; i++) {
      if (qArray[i].checked) return qArray[i].value;
    }
    return "";
  }
<input type="radio" name="answer1" value="England">England<br/>
<input type="radio" name="answer1" value="Scotland">Scotland<br/>
<input type="radio" name="answer1" value="Wales">Wales<br/>
<input type="radio" name="answer1" value="Northern Ireland">Northern Ireland<br/>
<!--radio buttons with different values-->

<br/>2: Which of the following is not in London:<br/>
<select id="answer 2">
  <option value="St Paul's Cathedral">St Paul's Cathedral</option>
  <option value="Buckingham Palace">Buckingham Palace</option>
  <option value="Stonehenge">Stonehenge</option>
</select>

<br/>3: Which year's Olympic games was hosted by London:<br/>
<input type="radio" name="answer3" value="2012">2012<br/>
<input type="radio" name="answer3" value="2008">2008<br/>
<input type="radio" name="answer3" value="2004">2004<br/>

<br/>4: Which river runs through London:<br/>
<input type="checkbox" name="answer4" value="La Seine">La Seine<br>
<input type="checkbox" name="answer4" value="Rhine River">Rhine River<br>
<input type="checkbox" name="answer4" value="River Thames">River Thames<br><br><br>

<input type="button" onclick="processMyForm(this.form)" value="Check answers">
<!--a button called "Check answers" will run processMyForm procedure when user click-->

<br/><br/>
<div id="result"></div>
<!--print out user's total mark-->
<br/>
<div id="result1"></div>
<div id="result2"></div>
<!--print out correct or incorrect for each question-->
<br/>
<br/>
Joshua
  • 40,822
  • 8
  • 72
  • 132
Usmaan Gill
  • 17
  • 7

1 Answers1

0

Buddy, you have a lot of mistakes as (not defining the tag form in your HTML markup, trying to reach elements by different names, missing code (you did not declared HTML answer 5 and 6, but you were trying to get responses for these elements (never gonna work),

Try to follow the code bellow, now is working.

Hope it can help you...

myTimer = setTimeout('alert("Time out")', 600000); /*alert will appear after 60 second*/

function processMyForm() {
  var chosenans1 = document.mainForm.answer1.value;
  var a1;

  //alert(document.mainForm.answer1.value);
  //alert(document.getElementById('answer2'));
  var chosenans2 = document.getElementById('answer2').value;
  var a2;

  var chosenans3 = document.mainForm.answer3.value;
  var a3;
  //alert(document.mainForm.answer3.value);

  var chosenans4 = document.mainForm.answer4.checked;
  var a4;

  //var chosenans5 = getRadioValue(frm.answer5);
  //var a5;
  //var chosenans6 = getRadioValue(frm.answer6);
  //var a6;

  // ----------------------------

  var total;

  // --------------------------------

  if (chosenans1 == "England") /*if radio value of answer1 is "England"*/ {
    a1 = 2; /*correct answer for 2 marks*/
    document.getElementById("result1").innerHTML = "<span class='correct'>Your answer to question 1 is correct.</span> "; /*print out correct at bottom of the page at <div id = "result1">*/
  } else {
    a1 = -1; /*incorrect answer for -1 mark*/
    document.getElementById("result1").innerHTML = "<span class='incorrect'>The correct answer to question 1 is 'England'.</span>"; /*print out incorrect at <div id = "result1">*/
  }

  // ---------------------

  if (chosenans2 == "Stonehenge") {
    a2 = 2;
    document.getElementById("result2").innerHTML = "<span class='correct'>Your answer to question 2 is correct.</span>";
  } else {
    a2 = -1;
    document.getElementById("result2").innerHTML = "<span class='incorrect'>The correct answer to question 2 is 'Stonehenge'.</span>";
  }

  // -------------------

  if (chosenans3 == "2012") {
    a3 = 2;
    document.getElementById("result3").innerHTML = "<span class='correct'>Your answer to question 3 is correct.</span>";
  } else {
    a3 = -1;
    document.getElementById("result3").innerHTML = "<span class='incorrect'>The correct answer to question 3 is '2012'.</span>";
  }

  // ---------------------

  if (chosenans4 == "River Thames") {
    a4 = 2;
    document.getElementById("result4").innerHTML = "<span class='correct'>Your answer to question 4 is correct.</span>";
  } else {
    a4 = -1;
    document.getElementById("result4").innerHTML = "<span class='incorrect'>The correct answer to question 4 is 'River Thames'.</span>";
  }

  // -------------------------

  /*if (chosenans5 == "Pound") {
    a5 = 2;
    document.getElementById("result5").innerHTML = ("<span class='correct'>Your answer to question 5 is correct.</span>");
  } else {
    a5 = -1;
    document.getElementById("result5").innerHTML = ("<span class='incorrect'>The correct answer to question 5 is 'Pound'.</span>");
  }

  if (chosenans6 == "David Cameron") {
    a6 = 2;
    document.getElementById("result6").innerHTML = ("<span class='correct'>Your answer to question 6 is correct.</span>");
  } else {
    a6 = -1;
    document.getElementById("result6").innerHTML = ("<span class='incorrect'>The correct answer to question 6 is 'David Cameron'.</span>");
  }*/

  // --------------------------------------------------------

  total = a1 + a2 + a3 + a4 ;//+ a5 + a6; /*add marks(2 or -1) together*/

  document.getElementById("result").innerHTML = ("Your mark is " + total); //print out your total mark at <div id = "result">
  alert("Your mark is " + total); //prompt total mark in small window

  if (total < 4) {
    document.body.style.backgroundImage = "none"; //remove background image
    document.body.style.backgroundColor = "#bb0000"; //add a background colour
  } else {
    document.body.style.backgroundImage = "none";
    document.body.style.backgroundColor = "#006600";
  }

  clearTimeout(myTimer); //stop timer
}


function getValue(qArray) { //get value from radio array
    var i;
    for (i = 0; i < qArray.length; i++) {
      if (qArray[i].checked) return qArray[i].value;
    }
    return "";
  }
<form id="mainForm" name="mainForm">
<input type="radio" name="answer1" value="England">England<br/>
<input type="radio" name="answer1" value="Scotland">Scotland<br/>
<input type="radio" name="answer1" value="Wales">Wales<br/>
<input type="radio" name="answer1" value="Northern Ireland">Northern Ireland<br/>
<!--radio buttons with different values-->

<br/>2: Which of the following is not in London:<br/>
<select id="answer2">
  <option value="St Paul's Cathedral">St Paul's Cathedral</option>
  <option value="Buckingham Palace">Buckingham Palace</option>
  <option value="Stonehenge">Stonehenge</option>
</select>

<br/>3: Which year's Olympic games was hosted by London:<br/>
<input type="radio" name="answer3" value="2012">2012<br/>
<input type="radio" name="answer3" value="2008">2008<br/>
<input type="radio" name="answer3" value="2004">2004<br/>

<br/>4: Which river runs through London:<br/>
<input type="checkbox" name="answer4" value="La Seine">La Seine<br>
<input type="checkbox" name="answer4" value="Rhine River">Rhine River<br>
<input type="checkbox" name="answer4" value="River Thames">River Thames<br><br><br>
  
<input type="button" onclick="processMyForm()" value="Check answers">
<!--a button called "Check answers" will run processMyForm procedure when user click-->

</form>

<br/><br/>
<div id="result"></div>
<!--print out user's total mark-->
<br/>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<!--print out correct or incorrect for each question-->
<br/>
<br/>
andrepaulo
  • 816
  • 11
  • 24