Тест с несколькими вариантами - получение оценки?

Я пытаюсь создать простую программу множественного выбора в HTML, но у меня возникают проблемы с получением ввода пользователем и указанием их оценки в конце. Может ли кто-нибудь помочь мне?Тест с несколькими вариантами - получение оценки?

Есть 10 вопросов для моей викторины с несколькими вариантами выбора и 4 варианта ответа на вопрос.

Вот один вопрос, например:

<li> 
<h3>How many letters are there in "JS"?</h3> 
<input type="radio" name="question9" value="A">2<br> 
<input type="radio" name="question9" value="B">1<br> 
<input type="radio" name="question9" value="C">3<br> 
<input type="radio" name="question9" value="D">4<br> 
</li>

Вот кнопка я использую, чтобы показать результаты пользователя:

<button onclick="returnScore()">View Results</button>

А вот мой текущий сценарий:

var userInput = new Array(); 
var answers = new Array(10); 
answers[0] = "B"; 
answers[1] = "C"; 
answers[2] = "A"; 
answers[3] = "C"; 
answers[4] = "D"; 
answers[5] = "D"; 
answers[6] = "D"; 
answers[7] = "D"; 
answers[8] = "C"; 
answers[9] = "A"; 

function getScore(){ 
var score=0; 
var numQuestions=10; 

for (var i=0;i<numQuestions;i++){ 
if (userInput[i]==answers[i]){ 
score += 1; 
} 
else{ 
score += 0; 
} 

} 
return score; 
} 
function returnScore(){ 
alert("Your score is "+getScore()+"/10"); 
}

Спасибо.

источник

2015-02-09 Mark D

Убедитесь, что ваши имена начинаются с 0 (question0) cause i внутри цикла for является 0 с индексированием.

Вы забыли петлю ваших элементов радио (по текущему имени индекса), чтобы получить значение проверяемого одного:

var answers = ["A","C","B"], 
 
    tot = answers.length; 
 

 
function getCheckedValue(radioName){ 
 
    var radios = document.getElementsByName(radioName); // Get radio group by-name 
 
    for(var y=0; y<radios.length; y++) 
 
     if(radios[y].checked) return radios[y].value; // return the checked value 
 
} 
 

 
function getScore(){ 
 
    var score = 0; 
 
    for (var i=0; i<tot; i++) 
 
    if(getCheckedValue("question"+i)===answers[i]) score += 1; // increment only 
 
    return score; 
 
} 
 

 
function returnScore(){ 
 
    alert("Your score is "+ getScore() +"/"+ tot); 
 
}

<ul> 
 
    <li> 
 
    <h3>How many letters are there in "JS"?</h3> 
 
    <input type="radio" name="question0" value="A">2<br> 
 
    <input type="radio" name="question0" value="B">1<br> 
 
    <input type="radio" name="question0" value="C">3<br> 
 
    <input type="radio" name="question0" value="D">4<br> 
 
    </li> 
 
    <li> 
 
    <h3>How many letters are there in "BMX"?</h3> 
 
    <input type="radio" name="question1" value="A">2<br> 
 
    <input type="radio" name="question1" value="B">1<br> 
 
    <input type="radio" name="question1" value="C">3<br> 
 
    <input type="radio" name="question1" value="D">4<br> 
 
    </li> 
 
    <li> 
 
    <h3>How many letters are there in "A"?</h3> 
 
    <input type="radio" name="question2" value="A">2<br> 
 
    <input type="radio" name="question2" value="B">1<br> 
 
    <input type="radio" name="question2" value="C">3<br> 
 
    <input type="radio" name="question2" value="D">4<br> 
 
    </li> 
 
</ul> 
 

 
<button onclick="returnScore()">View Results</button>

Вам не нужно возвращать += 0 для твой счет. Просто увеличьте его, только если у вас есть положительный матч.

При создании экземпляров новых массивов используйте стенографию [] вместо new Array().

источник

2015-02-09 06:18:56

Я не думаю, что пользователь «забыл», я думаю, что они просто не знали как. –

@SpencerWieczorek * «вы забыли ...» * это лучший способ сказать * «эй, вы не знаете, как ...» * –

Ха-ха, да, я по-прежнему очень новичок в HTML и JavaScript, и я на самом деле не знал, как это сделать. Но благодаря кучу, это было очень ясно и легко понять! –

Всего несколько синтаксических ошибок - плюс вы забыли определить, что UserInput [] на самом деле, прежде чем сравнивать его

<html> <body> 

<script> 
function returnScore() { 
    alert("Your score is " + getScore() + "/10"); 
} 
</script > 
< form id = "form1" > 

    <li> 
    <h3> How many letters are there in "JSX" ? </h3 > 
    < input type = "radio" name = "question8" value = "A" > 2 <br> 
    < input type = "radio" name = "question8" value = "B" > 1 <br> 
    < input type = "radio" name = "question8" value = "C" > 3 <br> 
    < input type = "radio" name = "question8" value = "D" > 4 <br> 
    </li > 

    <li> 
    <h3> How many letters are there in "JS" ? </h3 > 
    < input type = "radio" name = "question9" value = "A" > 2 <br> 
    < input type = "radio" name = "question9" value = "B" > 1 <br> 
    < input type = "radio" name = "question9" value = "C" > 3 <br> 
    < input type = "radio" name = "question9" value = "D" > 4 <br> 
    </li > 

    </form > 
    < button onclick = "javascript: returnScore()" > View Results </button > 

    < script type = "text/javascript" > 
     var userInput = []; 
var answers = [] 
answers[0] = "B"; 
answers[1] = "C"; 
answers[2] = "A"; 
answers[3] = "C"; 
answers[4] = "D"; 
answers[5] = "D"; 
answers[6] = "D"; 
answers[7] = "D"; 
answers[8] = "C"; 
answers[9] = "A"; 

function getScore() { 
    var score = 0; 
    var numQuestions = 10; 
    var form = document.getElementById('form1'); 

    userInput[8] = form1.question8.value; 
    userInput[9] = form1.question9.value; 


    for (var i = 0; i < numQuestions; i++) { 

      if (userInput[i] == answers[i]) { 
       score += 1; 
      } else { 
       score += 0; 
      } 

    } 
    return score; 
} 

</script > 

</body > </html >

источник

2015-02-09 06:08:03 mike510a

Доступ Форма значений для радиокнопок

Вы должны получить доступ к DOM и получить соответствующие значения для соответствующих элементов формы, которые вы проверяете. Для радиоэлементов требуется большая работа, что, вероятно, вызывает у вас проблемы.

Внутри функции getScore() вы можете циклически перебирать каждый из элементов вопроса, чтобы определить, какой ответ был проверен (это может быть реорганизовано для обработки всех вопросов и быть более эффективным, но я сохранил эту базовую форму, чтобы вы мог видеть, что происходит):

var question0s = document.getElementsByName("question0"); 

for (var i = 0; i < question0s.length; i++) { 
    if (question0s[i].checked) { 
     userInput[0] = question0s[i].value; 
    } 
}

Или, вы можете использовать функцию querySelector для более изящного подхода:

userInput[0] = document.querySelector('input[name="question0"]:checked').value;

Вот является переработан версия (которая просто означает, что код обновляется с улучшениями) функции getScore() ион обрабатывать все вопросы:

function getScore(){ 
    for (var i = 0; i < answers.length; i++) { 
     var currentQuestion = "question" + i; 
     var questionAnswers = document.getElementsByName(currentQuestion); 
     for (var j = 0; j < questionResponses.length; j++) { 
      if (questionResponses[i].checked) { 
       userInput[i] = question0s[i].value; 
      } 
     } 
    } 
    // after this completes, you'll have the user input values 
    // the rest of your code should now work 
    for (var i=0;i<numQuestions;i++){ 
     if (userInput[i]==answers[i]){ 
      score += 1; 
     } else { 
      score += 0; 
     } 
    } 

    return score; 
}

Улучшения (Рефакторинг) Ваш код

Теперь, что я показал, вы должны работать, но она все еще имеет много возможностей для улучшения. Возможно, вы увидите несколько способов сохранить некоторые шаги и сделать их еще лучше :) Удачи!

источник

2015-02-09 06:17:11 AdamJonR

@ MikeC- Да, как вы могли бы выяснить, какой из них выбран? –

@ MikeC- Он работает: http://jsfiddle.net/wojjx6og/ – AdamJonR

Я возвращаю свой комментарий - метод AdamJonR тоже работает – mike510a

<!DOCTYPE HTML> 

<html> 
<head> 

    <title>Quiz Questions And Answers</title> 
</head> 

<body> 
    <center><h1>Quiz Questions</h1></center> 
    <p> 
    <form name="quiz"> 
    <p> 
     <b>Question 1. 
     <br>He -------------------- it.<br></b> 
     <blockquote> 
    <input type="radio" name="q1" value="don't like">don't like<br> 
    <input type="radio" name="q1" value="doesn't like">doesn't like<br> 
    <input type="radio" name="q1" value="doesn't likes">doesn't likes<br> 
    </blockquote> 

<p><b> 
<hr> 
Question 2. 
<br>They -------------------- here very often.<br></b> 
<blockquote> 
<input type="radio" name="q2" value="don't come">don't come<br> 
<input type="radio" name="q2" value="doesn't come">doesn't come<br> 
<input type="radio" name="q2" value="doesn't comes">doesn't comes<br> 
</blockquote> 
<p><b> 
<hr> 
Question 3. 
<br>John and Mary -------------------- twice a week.<br></b> 
<blockquote> 
<input type="radio" name="q3" value="come">come<br> 
<input type="radio" name="q3" value="comes">comes<br> 
<input type="radio" name="q3" value="coming">coming<br> 
</blockquote> 
<p><b> 
<hr> 
Question 4. 
<br>I -------------------- mind at all.<br></b> 
<blockquote> 
<input type="radio" name="q4" value="not">not<br> 
<input type="radio" name="q4" value="isn't">isn't<br> 
<input type="radio" name="q4" value="don't">don't<br> 
</blockquote> 
<p><b> 
<hr> 
Question 5. 
<br>It -------------------- sense.<br></b> 
<blockquote> 
<input type="radio" name="q5" value="don't make">don't make<br> 
<input type="radio" name="q5" value="doesn't makes">doesn't makes<br> 
<input type="radio" name="q5" value="doesn't make">doesn't make<br> 
</blockquote> 
<p><b> 
<hr> 
Question 6. 
<br>They -------------------- happy.<br></b> 
<blockquote> 
<input type="radio" name="q6" value="seem">seem<br> 
<input type="radio" name="q6" value="seems">seems<br> 
<input type="radio" name="q6" value="seeming">seeming<br> 
</blockquote> 
<p><b> 
Question 7. 
<br>You -------------------- to do it.<br></b> 
<blockquote> 
<input type="radio" name="q7" value="don't have">don't have<br> 
<input type="radio" name="q7" value="doesn't have">doesn't have<br> 
<input type="radio" name="q7" value="doesn't has">doesn't has<br> 
</blockquote> 
<p><b> 
<hr> 
Question 8. 
<br>She -------------------- a brother.<br></b> 
<blockquote> 
<input type="radio" name="q8" value="doesn't has">doesn't has<br> 
<input type="radio" name="q8" value="don't has">don't has<br> 
<input type="radio" name="q8" value="doesn't have">doesn't have<br> 
</blockquote> 
<p><b> 
<hr> 
Question 9. 
<br>The journey -------------------- an hour.<br></b> 
<blockquote> 
<input type="radio" name="q9" value="take">take<br> 
<input type="radio" name="q9" value="takes">takes<br> 
<input type="radio" name="q9" value="taking">taking<br> 
</blockquote> 
<p><b> 
<hr> 
Question 10. 
<br>I -------------------- it now.<br></b> 
<blockquote> 
<input type="radio" name="q10" value="want">want<br> 
<input type="radio" name="q10" value="wants">wants<br> 
<input type="radio" name="q10" value="wanting">wanting<br> 
</blockquote> 
<p><b> 
<hr> 
Question 11. 
<br>Peggy -------------------- by bus.<br></b> 
<blockquote> 
<input type="radio" name="q11" value="come">come<br> 
<input type="radio" name="q11" value="comes">comes<br> 
<input type="radio" name="q11" value="coming">coming<br> 
</blockquote> 
<p><b> 
<hr> 
Question 12. 
<br>She --------------------.<br></b> 
<blockquote> 
<input type="radio" name="q12" value="don't know">don't know<br> 
<input type="radio" name="q12" value="doesn't knows">doesn't knows<br> 
<input type="radio" name="q12" value="doesn't know">doesn't know<br> 
</blockquote> 
<p><b> 
<hr> 
Question 13. 
<br>She -------------------- hard.<br></b> 
<blockquote> 
<input type="radio" name="q13" value="try">try<br> 
<input type="radio" name="q13" value="trys">trys<br> 
<input type="radio" name="q13" value="tries">tries<br> 
</blockquote> 
<p><b> 
<hr> 
Question 14. 
<br>They -------------------- football every weekend.<br></b> 
<blockquote> 
<input type="radio" name="q14" value="play">play<br> 
<input type="radio" name="q14" value="plays">plays<br> 
<input type="radio" name="q14" value="playing">playing<br> 
</blockquote> 
<p><b> 
<hr> 
Question 15. 
<br>The exam -------------------- two hours.<br></b> 
<blockquote> 
<input type="radio" name="q15" value="last">last<br> 
<input type="radio" name="q15" value="lastes">lastes<br> 
<input type="radio" name="q15" value="lasts">lasts<br> 
</blockquote> 
<p><b> 


<input type="button"value="Grade Me"onClick="getScore(this.form);"> 
<input type="reset" value="Clear"><p> 
Number of score out of 15 = <input type= text size 15 name= "mark"> 
Score in percentage = <input type=text size=15 name="percentage"><br> 

</form> 
<p> 

    <form method="post" name="Form" onsubmit="" action=""> 
</form> 

</body> 


<script> 
    var numQues = 15; 
var numChoi = 3; 
var answers = new Array(15); 
    answers[0] = "doesn't like"; 
    answers[1] = "don't come"; 
    answers[2] = "come"; 
    answers[3] = "don't"; 
    answers[4] = "doesn't make"; 
    answers[5] = "seem"; 
    answers[6] = "don't have"; 
    answers[7] = "doesn't have"; 
    answers[8] = "takes"; 
    answers[9] = "want"; 
    answers[10] = "comes"; 
    answers[11] = "doesn't know"; 
    answers[12] = "tries"; 
    answers[13] = "play"; 
    answers[14] = "lasts"; 
     function getScore(form) { 

    var score = 0; 
    var currElt; 
    var currSelection; 
    for (i=0; i<numQues; i++) { 
    currElt = i*numChoi; 
    answered=false; 
    for (j=0; j<numChoi; j++) { 
     currSelection = form.elements[currElt + j]; 
     if (currSelection.checked) { 
     answered=true; 
     if (currSelection.value == answers[i]) { 
      score++; 
      break; 
     } 
     } 
    } 
    if (answered ===false){alert("Do answer all the questions, Please") ;return false;} 
    } 

    var scoreper = Math.round(score/numQues*100); 
    form.percentage.value = scoreper + "%"; 
    form.mark.value=score; 


} 
    </script> 
</html>

источник

2017-03-09 04:56:03 Anonymous125217

Привет, добро пожаловать в [so]. Не могли бы вы объяснить, как это решить проблему? – Pang

Тест с несколькими вариантами - получение оценки?

ответ

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