0
javascriptに使用するデータを格納する構造体は何ですか？データを格納する構造
私はユーザーのテストを書きました。ユーザーは質問と3枚の写真を見る。彼はいくつかの写真をクリックし、彼の選択に応じて、彼は自分の選択を説明するコメントを見て、彼はポイントを得る。
質問が多い場合は、どのような構造で質問データを保存する必要がありますか？オプション数が異なる場合はどうすればよいですか？
var question_1 = {
text:"Which picture shows the church?",
images: ["http://ebubab.msk.ru/images/intro/geo.jpg",
\t \t \t \t "http://ebubab.msk.ru/images/intro/neznakomka.jpg",
"http://ebubab.msk.ru/images/intro/ruka.jpg"],
comments: ["That's right, the church is where there are domes.",
"Are you blind? There, the girls are with a guy. There is no church there.",
"Clear your eyes. There's a leaf with someone's text, not a church."],
points: [1, 0, 0],
};
var question_2 = {
text:"And where is the angel?",
images: ["http://ebubab.msk.ru/images/intro/bereza.jpg",
"http://ebubab.msk.ru/images/intro/sponsor.jpg",
"http://ebubab.msk.ru/images/intro/pismo.jpg"],
comments: ["Like this? A bearded man for you is an angel or what?",
"Since when did curly-headed uncles become angels?",
"All right. You found our angel."],
points: [0, 0, 1],
};
var question_3 = {
text:"Where is the picture on which there are no womanizer?",
images: ["http://ebubab.msk.ru/images/intro/babnik.jpg",
"http://ebubab.msk.ru/images/intro/plakat.jpg",
"http://ebubab.msk.ru/images/intro/stishki-mini.jpg"],
comments: ["You are mistaken. A guy surrounded by a bunch of girls - this is just a womanizer.",
"Here it is! Indeed, something interesting is selected here, but there are no womanizer here.",
"Not true. A stylish man surrounded by elegant girls is a womanizer."],
points: [0, 1, 0],
};
var questions = [question_1, question_2, question_3];
var number = 0;
var scores = 0;
document.getElementById("question").innerHTML = questions[number].text;
document.getElementById("img_1").src = questions[number].images[0];
document.getElementById("img_2").src = questions[number].images[1];
document.getElementById("img_3").src = questions[number].images[2];
$(function() {
$("#button").hide();
$("#img_1").click(function() {
$("#img_1, #img_2, #img_3, #question").hide();
$("#result, #button").show();
document.getElementById("result").innerHTML = questions[number].comments[0];
scores += questions[number].points[0];
number ++;
});
$("#img_2").click(function() {
$("#img_1, #img_2, #img_3, #question").hide();
$("#result, #button").show();
document.getElementById("result").innerHTML = questions[number].comments[1];
scores += questions[number].points[1];
number ++;
});
$("#img_3").click(function() {
$("#img_1, #img_2, #img_3, #question").hide();
$("#result, #button").show();
document.getElementById("result").innerHTML = questions[number].comments[2];
scores += questions[number].points[2];
number ++;
});
$("#button").click(function() {
\t
if (number < questions.length) {
\t $("#result, #button").hide();
\t $("#question, #img_1, #img_2, #img_3").show();
\t document.getElementById("question").innerHTML = questions[number].text;
\t \t \t document.getElementById("img_1").src = questions[number].images[0];
\t \t \t document.getElementById("img_2").src = questions[number].images[1];
\t \t \t document.getElementById("img_3").src = questions[number].images[2];
} else {
\t $("#result, #button").hide();
$("#result").show();
\t document.getElementById("result").innerHTML = "Your score: " + scores + "/" + questions.length;
\t }
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="question"></p>
<p><img id="img_1" src="" /></p>
<p><img id="img_2" src="" /></p>
<p><img id="img_3" src="" /></p>
<p id="result"></p>
<button id="button">Next</button>