2016-07-31 2 views
0

Я хочу реализовать онлайн-викторину в своем блоге. Ниже мой код после выбора всех параметров, когда пользователь нажимает результаты просмотра, отображает результат как всплывающее окно.Как получить тест теста теста как текст без всплывающего окна

Но я хочу показать результат как текст в форме, как показано на рисунке ниже.

score

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 "ZZ"?</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 "ZZX"?</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 "V"?</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

Я не вижу форму в вашем примере, так и в какой элемент должны результаты идут. Кроме того, почему тег jQuery я не вижу. – j08691

ответ

1

Вы должны сделать место в DOM для счета идти.

<div id="show-score"></div> 

Затем используйте функцию returnScore, чтобы поместить там результат вместо предупреждения.

function returnScore(){ 
    document.getElementById('show-score').innerHTML = 
     "Your score is "+ getScore() +"/"+ tot; 
} 

См скрипка: https://jsfiddle.net/7Ly00p2z/

+0

это сработало ..... ваша работа заметна – overflowstack9

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