2016-12-19 5 views
-1

Я новичок в программировании. Нынешняя проблема, с которой я столкнулся, - это отсутствие отображения правильного ответа на вопрос флажка. Номер вопроса - 4, например, выбор вопроса 4 не отображает правильный ответ River Thames. Убедитесь, что вопрос № 4 верен.Проверка формы флажка javascript

Javascript:

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 chosenans4 = document.mainForm.answer4.checked; 
var a4; 




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

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>"; 
} 



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

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 ""; 
} 

HTML:

 <form id="mainForm" name="mainForm"> 


     <p>1: London belongs to:</p><br> 



     <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> 
     <p>2: Which of the following is not in London:</p><br> 


     <select id="answer2"> 
     <option value="">Select an answer</option> 
     <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><br> 



     <br> 
     <p>4: Which river runs through London:</p> 
     <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> 


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

     </form> 




<!--print out user's total mark--> 
<br/> 
<div id="result1"></div> 
<div id="result2"></div> 
<div id="result3"></div> 
<div id="result4"></div> 

<div id="result"></div> 
+0

Подтверждением вы хотите убедиться, что они ответили или верят, что ответ правильный? путем включения ваших ответов на той же странице знающие пользователи смогут просматривать ответы - ваша проверка должна быть серверной. – happymacarts

+0

Убедитесь, что вопрос номер 4 верен. –

+0

Нет проверки –

ответ

0

Предполагая, что вы остановились на открытии <form name="mainForm">, это выглядит, как вам нужно добавить элементы "результат".

Результат innerHTML, например: document.getElementById("result4").innerHTML = ..., выдает ошибку, потому что нет элемента с id="result4".

Добавить что-то вроде этого, где вы хотите видеть правильные сообщения Результаты отображаются:

<div id="result1"></div> 
<div id="result2"></div> 
<div id="result3"></div> 
<div id="result4"></div> 
<div id="result5"></div> 
<div id="result6"></div> 
<div id="result"></div> 

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 = document.mainForm.answer5.value; 
 
var a5; 
 

 
var chosenans6 = document.mainForm.answer6.value; 
 
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 name="mainForm"> 
 
\t <p>1: London belongs to:</p><br> 
 

 

 

 
<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> 
 
<p>2: Which of the following is not in London:</p><br> 
 

 

 
<select id="answer2"> 
 
<option value="">Select an answer</option> 
 
<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><br> 
 

 
<p>3: Which year's Olympic games was hosted by London:</p> 
 
<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> 
 
<p>4: Which river runs through London:</p> 
 
<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/><p>5: What is the name of the currency used in London:</p> 
 
<br> 
 
<input type="radio" name="answer5" value="Dollar">Dollar<br/> 
 
<input type="radio" name="answer5" value="Pound">Pound<br/> 
 
<input type="radio" name="answer5" value="Euro">Euro<br/> 
 

 

 

 

 

 

 
<br/><p>6: Who is the current Prime Minister of the UK (2014):</p> 
 
<br> 
 
<input type="radio" name="answer6" value="Tony Blair">Tony Blair<br/> 
 
<input type="radio" name="answer6" value="Gordon Brown">Gordon Brown<br/> 
 
<input type="radio" name="answer6" value="David Cameron">David Cameron<br/> 
 

 

 
<br> 
 

 

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

 
</form> 
 

 
<div id="result1"></div> 
 
<div id="result2"></div> 
 
<div id="result3"></div> 
 
<div id="result4"></div> 
 
<div id="result5"></div> 
 
<div id="result6"></div> 
 
<div id="result"></div>

+0

У меня есть эти изменения, которые все еще не отображают правильный ответ. –

+0

@UsmaanGill, только что добавил фрагмент рабочего кода – chester

0

иметь в виду, что это решение плохо, но это будет решить вашу проблему без изменяя всю вашу структуру кода

первый: позволяет добавить идентификатор к линии реки Темзы.

<input type="checkbox" id="correct" name="answer4" value="River Thames">River Thames<br> 

второе: изменить JavaScript, чтобы проверить, если идентификатор проверяется вместо того, чтобы значение

var chosenans4 = document.getElementById('correct').checked; 

третий: проверка в настоящее время против истинного или ложного так

if (chosenans4) { 
//your code 

это будет держать вас открытым для всех выбранных параметров, и вы все еще говорите, что это правда, но это будет другая проблема, чем та, которую вы здесь представили! надеюсь, что это поможет :) btw вот рабочая скрипка: https://jsfiddle.net/zxfh1jad/

Смежные вопросы