Как сгенерировать новый объект, используя те же методы

Изначально проект, над которым я работаю, состоял из единственной викторины, в которой задавалось пять вопросов, а в конце он сообщал вам ваш результат, и все. Я узнаю больше о модели MVC, и поэтому она была построена с использованием этой модели.

Теперь я хочу добавить новые функции в приложение для викторины, например, если вы набрали больше трех баллов, на последней странице с баллом есть кнопка с надписью «уровень 2», как на изображении ниже, и когда вы нажимаете на нее, требуется вы перейдете на следующий уровень с новым набором вопросов от другого объекта:

Как сгенерировать новый объект, используя те же методы

Если вы наберете меньше трех очков, вы получите кнопку с надписью «попробуйте еще раз», и викторина начнется заново. Если вы перейдете на следующий уровень, я хочу, чтобы счет сохранился, и тот же процесс будет происходить до тех пор, пока вы не достигнете третьего уровня.

Проблема, с которой я столкнулся, заключается в том, чтобы выяснить, как повторно использовать тот же код, чтобы повторно заполнить страницу новым набором вопросов для следующего уровня и отслеживать результат. Я попытался создать новый метод под названием nextLevel, который при нажатии кнопки второго уровня викторины будет заполняться новыми вопросами, но этого не происходит. Любая помощь или руководство будут оценены.

Вот мой index.html:

<html>
<head lang = "en">
    <meta charset = "UTF-8">
    <title>Capstone</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
    <div class = "grid">
        <div id = "quiz">
            <h1>JerZey's</h1>
            <hr style = "margin-bottom: 20px">

            <p id = "question"></p>

            <div class = "buttons">
                <button id = "btn0"><span id = "choice0"></span></button>
                <button id = "btn1"><span id = "choice1"></span></button>
                <button id = "btn2"><span id = "choice2"></span></button>
                <button id = "btn3"><span id = "choice3"></span></button>
            </div>

           <div id = "btn5">

           </div>

            <hr style = "margin-top: 50px">
            <footer>
                <p id = "progress">Question x of y</p>
            </footer>
        </div>
    </div>

<script src = "quiz.js"></script>
<script src = "question.js"></script>
<script src = "app.js"></script>
</body>
</html>

Вот моя модель (question.js):

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
    if (this.getQuestionIndex().isCorrectAnswer(answer)) {
        this.score++;
    }

    this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
    return this.questionIndex === this.questions.length;
}

Контроллер (quiz.js):

function Quiz(questions) {
    this.score = 0;
    this.questions = questions;
    this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
    if (this.getQuestionIndex().isCorrectAnswer(answer)) {
        this.score++;
    }

    this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
    return this.questionIndex === this.questions.length;
}

Просмотры (app.js):

function populate() {
    if (quiz.isEnded()) {
        showScores();
    }
    else {
        // show question
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        // show options
        var choices = quiz.getQuestionIndex().choices;
        for(var i = 0; i < choices.length; i++) {
            var element = document.getElementById("choice" + i);
            element.innerHTML = choices[i];
            guess("btn" + i, choices[i]);
        }

        showProgress();
    }
};

function guess(id, guess) {
    var button = document.getElementById(id);
    button.onclick = function() {
        quiz.guess(guess);
        populate();
    }
};


function showProgress() {
    var currentQuestionNumber = quiz.questionIndex + 1;
    var element = document.getElementById("progress");
    element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};

function showScores() { 



    if (quiz.score < 3){
  var gameOverHTML = "<h1>Level 1 Complete</h1>";
    gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2><button onClick='refreshPage()' type='button'>Try Again</button>";
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
  }else{
    var gameOverHTML = "<h1>Level 1 Complete</h1>";
    gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2><button type='button' onClick='nextLevel()'>Level 2</button>";
    var element = document.getElementById("quiz");
    element.innerHTML = gameOverHTML;
  }


};

function refreshPage() {
location.reload();
};

function nextLevel(){ //This is where I am stuck at and am not sure if I even need it or if I am going about it the wrong way
var quiz = new Quiz(questions2);
populate();
};


// find a way to show countdown on screen
// setInterval(showScores, 5000);

// create questions
var questions = [
    new Question("What two teams have been active since 1920?", ["New York Giants and Dallas Cowboys", "Denver Broncos and Oakland Raiders","Arizona Cardinals and Chicago Bears", "Green Bay Packers and Detroit Lions "], "Arizona Cardinals and Chicago Bears"),
    new Question("What team has 216 games played?", ["Houston Texans", "Los Angeles Chargers", "Miami Dolphins", "Washington Redskins"], "Houston Texans"),
    new Question("What's the correct number of the Oakland Raiders Post-season record of wins?", ["17", "34","100", "25"], "25"),
    new Question("Which team has the colors yellow and green?", ["49ers", "Rams", "Packers", "Vikings"], "Packers"),
    new Question("What was Kansas City Chiefs regular season record ties?", ["67", "12", "10", "30"], "12")
];

var questions2 = [
    new Question("Which team hired their 1st professional cheerleading squad?", ["Dallas Cowboys", "San Francisco 49ers","Tampa Bay Buccaneers", "Chicago Bears "], "Dallas Cowboys"),
    new Question("What team won the first final in January 1967?", ["Houston Texans", "Los Angeles Chargers", "Miami Dolphins", "Greenbay Packers"], "Greenbay Packers"),
    new Question("Who won the most superbowls in history?", ["Steelers", "Redskins","Lions", "Seahawks"], "Steelers"),
    new Question("The curse of 10 which NFL team has only scored 10 points in 3 different superbowls?", ["Raiders", "Rams", "Broncos", "Vikings"], "Broncos"),
    new Question("How many rings does Tom Brady have?", ["4", "1", "3", "5"], "5")
];

var questions3 = [
    new Question("What were Nfl players required to wear in games for the 1st time in 1943?", ["Knee pads", "Bandanas","Helmets", "Raider Jerseys "], "Helmets"),
    new Question("What was the Nfl's sports caster Madden's first name ?", ["Derek", "John", "Anthony", "Bob"], "John"),
    new Question("How many years do players have to be retired to be eligible for the Hall of Fame", ["10", "2","7", "5"], "5"),
    new Question("Where were the Rams originally franchised before they moved to Los Angeles?", ["Cleveland", "Atlanta", "Detroit", "New York"], "Cleveland"),
    new Question("Which Nfl team features a helmet decal only on one side?", ["Eagles", "Saints", "Jaguars", "Steelers"], "Steelers")
];
// create quiz
var quiz = new Quiz(questions);

// display quiz
populate();

Вот как выглядит викторина, когда вы проигрываете:

Как сгенерировать новый объект, используя те же методы

Вот как это выглядит вначале:

Как сгенерировать новый объект, используя те же методы

Я думаю, что он застрял, потому что quiz.IsEnded(). Я не вижу, где это значение возвращает false, когда вы пытаетесь заполнить второй набор вопросов. Возможно, вам понадобится метод, который устанавливает для этой функции возврат false, когда она nextLevel или что-то в этом роде.

Iskandar Reza 06.09.2018 20:38

Спасибо за предложение, которое я рассматриваю. Все еще пытаюсь осмыслить все это.

Jermaine Subia 06.09.2018 21:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
2
88
1

Ответы 1

Интересное упражнение. Чтобы максимально придерживаться MVC, я бы реализовал его следующим образом.

Вы создаете экземпляр своей модели и своего представления и передаете их контроллеру в главном разделе приложения, а затем оставляете контроллер «управлять» представлением и моделью.

Я не учел обработку уровней сложности, но должно быть довольно ясно, где это подходит.

Model.js

function Question(text, choices, answer) {
    this.text  = text;
    this.choices = choices;
    this.answer = answer;
}

Question.prototype.hasAnswer = function (answer) {
    return this.answer === answer;
};

function Model(questions) {
    this.questions = questions;
    this.questionIndex = 0;
    this.score = 0;
}

Model.prototype.nextQuestion = function () {
    if (this.questionIndex < this.questions.length) 
        return this.questions[this.questionIndex];
    return null;
};

Model.prototype.checkAnswer = function (choice) {
    if (this.questions[this.questionIndex].hasAnswer(choice))
        this.score++;
    this.questionIndex++;
};

Model.prototype.reset = function () {
    this.questionIndex = 0;
    this.score = 0;
};

Controller.js

function Controller(doc, model) {
    this.doc = doc;
    this.model = model;
}

Controller.prototype.initialize = function () {
    this.next();
};

Controller.prototype.next = function () {
    const that = this;
    const question = this.model.nextQuestion();
    if (question == null) {
        this.showScore();
        return;
    }
    const questionSection = this.doc.querySelector("#question");
    questionSection.innerHTML = question.text;
    const choicesSection = this.doc.querySelector("#choices");
    choicesSection.innerHTML = "";
    for (let choice of question.choices) {
        const choiceButton = this.doc.createElement("button");
        choiceButton.innerHTML = choice;
        choiceButton.addEventListener("click", function (e) {
            that.model.checkAnswer(choice);
            that.next();
        });
        choicesSection.append(choiceButton);
    }
};

Controller.prototype.showScore = function () {
    const that = this;
    this.clear();
    const scoreSection = this.doc.querySelector("#score");
    scoreSection.innerHTML = "Score: " + this.model.score;
    const tryAgainButton = this.doc.createElement("button");
    tryAgainButton.innerHTML = "Try again";
    tryAgainButton.addEventListener("click", function (e) {
        scoreSection.innerHTML = "";
        that.model.reset();
        that.next();
    });
    scoreSection.append(this.doc.createElement("p"));
    scoreSection.append(tryAgainButton);
};

Controller.prototype.clear = function () {
    const questionSection = this.doc.querySelector("#question");
    questionSection.innerHTML = "";
    const choicesSection = this.doc.querySelector("#choices");
    choicesSection.innerHTML = "";
};

Index.html (просмотреть)

<!DOCTYPE html>
<html>
    <head>
    <title>Quizaaaaaaaaaaaaaaaaaaaaa</title>
    <script type = "text/javascript" src = "model.js"></script>
    <script type = "text/javascript" src = "controller.js"></script>
    <script type = "text/javascript">
        window.addEventListener("load", function (e) {
        const questions = [
            new Question("Question A", ["A", "B", "C", "D"], "A"),
            new Question("Question B", ["A", "B", "C", "D"], "B"),
            new Question("Question C", ["A", "B", "C", "D"], "C"),
            new Question("Question D", ["A", "B", "C", "D"], "D")
        ];
        const model = new Model(questions);
        const controller = new Controller(document, model);
        controller.initialize();
        });
    </script>
    </head>
    <body>
    <div id = "question"></div>
    <div id = "choices"></div>
    <div id = "score"></div>
    </body>
</html>

Спасибо за ваш отзыв! Я все время получаю следующую ошибку, которую не могу найти, и все вроде нормально: index.html: 10 Uncaught ReferenceError: Questions is not defined

Jermaine Subia 10.09.2018 16:20

Если вы ссылаетесь на мой пример без каких-либо изменений, я набрал «вопросы», а не «Вопросы». Это могло быть причиной.

RWRkeSBZ 10.09.2018 17:41

Имею в виду ваш пример без изменений. Вы знаете, в какой части была допущена эта ошибка. Я пытался внести изменения, но продолжаю получать ту же ошибку. Кстати, спасибо за вашу помощь.

Jermaine Subia 10.09.2018 19:42

Вам нужно будет показать код. Это может быть любая из миллиона возможностей.

RWRkeSBZ 11.09.2018 01:18

Другие вопросы по теме