Question

我应该使用什么结构存储数据用于javascript？

我为用户写了一个测试。用户看到问题和3张图片。他点击了一些图片，根据他的选择，他看到了描述他选择的评论，并获得了积分。

如果有很多问题，我应该在什么结构中存储问题数据。如果选项的数量不同，该怎么办？

var question_1 = {
    text:"Which picture shows the church?",
    images: ["http://ebubab.msk.ru/images/intro/geo.jpg", 
    				 "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() {
    	
    if (number < questions.length) {
    	$("#result, #button").hide();
    	$("#question, #img_1, #img_2, #img_3").show();
    	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];
    } else {
    	$("#result, #button").hide();
      $("#result").show();
     	document.getElementById("result").innerHTML = "Your score: " + scores + "/" + questions.length;
    	}
  });  
});

<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>

Answer 1

我会将答案分组到对象中，而不是有3个单独的数组。

last_name

存储数据的结构

1 个答案: