Создание викторины JavaScript App (псевдокод)

Может кто-нибудь проверить, если я на правильном пути, это моя попытка моего первого веб-приложения, которое я пытаюсь разным подходам, но каждый раз, когда я общаюсь на полпути, чтобы узнать, что я усложняю ситуацию, поэтому на этот раз я пишу псевдокод и использую это как руководство, чтобы помочь мне выполнить мою цель, мне просто нужно знать, правильно ли подходит мой подход:Создание викторины JavaScript App (псевдокод)

Это мой 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 < question.length затем перейти к следующему вопросу и множество вариантов,

еще

предупредительное сообщение ("вы дойдете до конца викторины"); у вас есть правильный ответ; // отображение оценки:

Это похоже на правильный план?

Спасибо всей помощь очень ценятся :)

источник

2016-07-31 Larry_tha_Mighty

Вашего массива объектов хранятся как questions выглядит хорошо.

Возможный и более реальный подход заключается в том, чтобы сохранить массив объектов в виде файла json здесь: myjson.com, а затем вызвать его через запрос AJAX.

Если вы решили пойти по этому маршруту, вам нужно будет поместить котировки вокруг ключа question и correctAnswer, а также их соответствующих значений для его подбора как `json '.

Как только вы сохраните его правильно, он даст вам конечную точку URL 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 loop, а не for, как ваш spec предлагает в вашем разделе «псевдо-код».

источник

2018-01-18 20:35:49 Daniel

Создание викторины JavaScript App (псевдокод)

ответ

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