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

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

0 голосов
/ 06 сентября 2018

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

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

level

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

Проблема, с которой я сталкиваюсь, состоит в том, чтобы попытаться выяснить, как повторно использовать тот же код, чтобы заново заполнить страницу новым набором вопросов для следующего уровня и отслеживать результаты. Я попытался создать новый метод с именем 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();

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

second

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

last

1 Ответ

0 голосов
/ 08 сентября 2018

Интересное упражнение. Чтобы как можно ближе придерживаться 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...