创建JavaScript测验应用程序(伪代码)

时间:2016-07-31 22:23:12

标签: javascript jquery logic

有人可以查看我是否在正确的轨道上,这是我尝试第一次网络应用程序我一直在尝试不同的方法,但每次我得到一半的时间来找出我是使事情变得复杂所以这次我正在编写伪代码并将其作为指导来帮助我实现目标,我只需要知道我的方法是否正确:

这是我的HTML:

<body>
<div class="container">
    <div id="quiz">
        <h3 class="question"></h3> display question
        <p class="choices"></p> display choices



    </div>
</div>

这是数组:

            var questions = [{
            question: "What is my Favourite Movie?",
            choices: ["The Matrix", "Star Wars", "The Godfather", "Django: Unchained"],
            correctAnswer: 0
        }, {
            question: "What was my Dream Job when I was a mere child?",
            choices: ["Programmer", "Footballer", "Super Hero", "Zoologist"],
            correctAnswer: 2
        }, {
            question: "How long did it take me to make this Web Application?",
            choices: ["12hours", "6 hours", "7hours", "10hours"],
            correctAnswer: 3
        }, {
            question: "Why have I built this Web Application?",
            choices: ["Boredom", "Display my Programming Skills", "Somebodys request", "......"],
            correctAnswer: 1
        }, {
            question: "Which Musical Instrument do I play?",
            choices: ["Bongos", "Piano", "Trumpet", "Harmonica"],
            correctAnswer: 0
        }];

这是我的伪代码:

1。 显示第一个问题 和第一组选择 那个问题

2。 当用户点击一个选项时: 如果选择=== correctAnswer 添加一点

否则 什么都不做?

如果currentQuestion&lt; question.length 然后转到下一个问题 和一系列选择,

其他

消息提醒(“你到达测验结束”); 你有正确的答案; //显示分数:

这看起来像是正确的计划吗?

非常感谢所有帮助:)

1 个答案:

答案 0 :(得分:0)

存储为questions的对象数组看起来不错。

一种可能的,更现实的方法是将您的对象数组保存为json文件:myjson.com然后通过AJAX请求调用它。

如果您决定走这条路线,则必须在question键和correctAnswer键周围加上引号以及相应的值,以便将其作为“json&#39”选择;

正确保存后,它会为您提供api个网址。您需要AJAX来电。

您也可以像这样使用一个简单的index.html文件:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="quizstyle.css">
</head>

<body>
    <div id="output"></div>



<script src="script.js" type="text/javascript"></script>
</body>


</html>

然后在你的script.js文件中:

var output = document.getElementById('output');
// this allows us to keep it as a global value
var myObj = '';
    page = 0;
loadQuestions();

function loadQuestions() {
  // http request
  // this will allow you to pull in
  // the questions from the api that
  // your questions or data is stored in
  var a = new XMLHttpRequest();
  a.open("GET", "<api-url-endpoint>", true); // opened request with address with
  a.onreadystatechange = function(){
    if (a.readyState == 4) {
      myObj = JSON.parse(a.responseText);
      page = 1;
      buildQuiz(1);
    }
  }
  a.send();
}

function buildQuiz(page){
  for (var i in myObj) {
    var myQuestion = myObj[page - 1].question;
    var myCorrect = myObj[page - 1].question;
    var questionHolder = '';
    for(var i in myObj[page - 1].correctAnswer){
      questionHolder += '<div class="col-sm-6">'
    }
    console.log();
  }

}

您希望使用for..in循环而不是for循环,就像您的&#34;伪代码&#34;部分。