-1
答えを選択すると次の質問に進むべきクイズがありますが、私のコードはうまくいかず、ユーザーは複数回答を選択することができますそれ以降は何も起こらない。Javascriptクイズは次のクイズには進まない
最後の質問が終了したら、その結果を表示する必要があります。あなたは要素を取得し、どのようにいくつかのエラーを持っていたあなたのbuttonclicked機能で
document.getElementById("beginquiz").addEventListener("click", startQuiz);
function startQuiz() {
document.getElementById("intro").style.display = "none";
document.getElementById("q1").style.display = "block";
}
var answerData = {
"p": 0,
"vp_w": 0,
"vp_e": 0,
"vp_a": 0,
"vp_s": 0
};
var buttons = document.querySelectorAll(".button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = buttonClicked;
}
function buttonClicked(buttonNext) {
var target = answer.target; //1. 'this' is parent, need target
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
this.parentElement.style.display = "none";
//Work out what the next question div is
var nextQuestion = this.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
\t document.getElementById(nextQuestion).style.display = "block";
\t else
\t printResult();
}
function calculateResult (answerData){
\t \t var highest = Math.max(total_points.p, total_points.vp_s, total_points.vp_e, total_points.vp_w, total_points.vp_a);
\t \t var result;
\t for (var i in total_points) {
\t if (total_points.hasOwnProperty(i)){
\t if (total_points[i] === highest){
\t result = i;
}
}
}
switch(result) {
\t \t \t \t \t case 'p':
\t \t \t \t \t \t result = 'President';
\t \t \t \t \t \t break;
\t \t \t \t \t case 'vp_w':
\t \t \t \t \t \t result = 'Vice-President Welfare';
\t \t \t \t \t \t break;
\t \t \t \t \t case 'vp_e':
\t \t \t \t \t \t result = 'Vice-President Education';
\t \t \t \t \t \t break;
\t \t \t \t \t case 'vp_s':
\t \t \t \t \t \t result = 'Vice-President Sports';
\t \t \t \t \t \t break;
\t \t \t \t \t case 'vp_a':
\t \t \t \t \t \t result = 'Vice-President Activities';
\t \t \t \t \t \t break;
\t \t \t \t \t default:
\t \t \t \t \t \t break;
\t \t \t \t }
\t \t \t \t return result;
};
function printResult() {
document.getElementById('result').innerHTML = '<h2>You are: '+result+'</h2>';
}.question,
#result {
display: none;
}
.button li {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 80%;
margin: 0 auto;
}
.button li:hover {
color: #bfbfbf;
background-color: #555;
}
#intro,
.question,
#result {
max-width: 600px;
margin: 0 auto;
}
#beginquiz {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 20em;
margin: 0 auto;
}
#beginquiz:hover {
color: #bfbfbf;
background-color: #555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
<button id="beginquiz">Start the quiz</button>
</div>
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<div class="question" id="q1" data-next="q2">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q2" data-next="q3">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q3" data-next="q4">
<li><div id="q3" data-next="q4">What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q4">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
</form>
<div id="result">
<h2>You are:</h2>
</div>