Как я могу проверить, содержит ли элемент с изменяемым дочерним элементом свойство массива с определенным значением? - PullRequest
Новая
       4

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

0 голосов
/ 25 марта 2020

Может кто-нибудь взглянуть на мой код и сообщить мне, как я могу написать эту функцию. Я создаю викторину последовательности, где ответы должны быть расположены в правильном порядке.

Когда игрок доволен своим порядком, есть функция проверки ответов. Вопросы поступают из массива, в котором для каждого ответа определено свойство {"correct_order" :1}.

Мне интересно, как теперь можно написать код, чтобы проверить, содержится ли {"correct_order" :1} в answerOneContainer. Ниже приведено HTML для контейнера викторины и завершено JS, и я пытаюсь проверить, содержит ли контейнер {"correct_order" :1} внутри функции // CHECK ANSWER, но я не уверен, как написать этот фрагмент кода: 

// VARIABLES
    const quizQuestion = document.getElementById('question');
    const answerOne = document.getElementById('ans1');
    const answerTwo = document.getElementById('ans2');
    const answerThree = document.getElementById('ans3');
    const answerFour = document.getElementById('ans4');
    const answerFive = document.getElementById('ans5');
    const answerOneContainer = document.getElementById('container1');
    const answerTwoContainer = document.getElementById('container2');
    const answerThreeContainer = document.getElementById('container3');
    const answerFourContainer = document.getElementById('container4');
    const answerFiveContainer = document.getElementById('container5');

    // QUIZ QUESTIONS ARRAY

    const myQuestions = [
    {
    question: "Starting with the most put these countries in order of total population",
    answers: [
        { "correct_order": 5, "details": "Ireland" },
        { "correct_order": 2, "details": "United States" },
        { "correct_order": 3, "details": "Russia" },
        { "correct_order": 1, "details": "China" },
        { "correct_order": 4, "details": "United Kingdom" }
    ]
    },
    {
    question: "Starting with the most put these countries in order of size",
    answers: [
        { "correct_order": 2, "details": "Canada" },
        { "correct_order": 5, "details": "Ireland" },
        { "correct_order": 3, "details": "Australia" },
        { "correct_order": 4, "details": "Mexico" },
        { "correct_order": 1, "details": "Russia" }
    ]
    },
    {
    question: "Starting with the most put these languages in order of most spoken",
    answers: [
        { "correct_order": 2, "details": "English" },
        { "correct_order": 5, "details": "Arabic" },
        { "correct_order": 3, "details": "Hindustani" },
        { "correct_order": 4, "details": "Spanish" },
        { "correct_order": 1, "details": "Mandarin Chinese" }
    ]
    }
    ]

    // BUILD QUIZ FUNCTION

    document.getElementById("start-quiz").onclick = function () { buildQuiz() };

    let counter = 0;

    function buildQuiz() {
    document.getElementById("callout").classList.add("d-none");
    document.getElementById("quiz").classList.remove("d-none");
    quizQuestion.innerHTML = myQuestions[counter].question;
    answerOne.innerHTML = myQuestions[counter].answers[0].details;
    answerTwo.innerHTML = myQuestions[counter].answers[1].details;
    answerThree.innerHTML = myQuestions[counter].answers[2].details;
    answerFour.innerHTML = myQuestions[counter].answers[3].details;
    answerFive.innerHTML = myQuestions[counter].answers[4].details;    
    };

    // SWAP ANSWERS FUNCTION

    let answerContainers = {
    "container1": answerOneContainer,
    "container2": answerTwoContainer,
    "container3": answerThreeContainer,
    "container4": answerFourContainer,
    "container5": answerFiveContainer,
    }

    function swapAnswersContainer(switchButton, container1, container2) {
    document.getElementById(switchButton).addEventListener('click', () => {
    $("#" + container1).children(":first").slideToggle('fast');
    $("#" + container2).children(":first").slideToggle('fast', function () {



    answerContainers[container2].appendChild(answerContainers[container1].firstElementChild);
    answerContainers[container1].appendChild(answerContainers[container2].firstElementChild);
    });
    $("#" + container1).children(":first").slideToggle('fast');
    $("#" + container2).children(":first").slideToggle('fast');
    });
    }

    swapAnswersContainer("switch1", "container1", "container2");
    swapAnswersContainer("switch2", "container2", "container3");
    swapAnswersContainer("switch3", "container3", "container4");
    swapAnswersContainer("switch4", "container4", "container5");

    // CHECK ANSWER FUNCTION

    document.getElementById("quizSubmit").onclick = function () { checkAnswer() };

    function checkAnswer() {
    document.getElementById("quizSubmit").classList.add("d-none");
    document.getElementById("nextQuestion").classList.remove("d-none");

    let score = 0;
    if (answerOneContainer.firstElementChild === "correct_order": "1") {
    document.getElementById("container1").classList.add("green-border")
    } else {
    document.getElementById("container1").classList.add("red-border")
    }
    };

    // NEXT QUESTION FUNCTION

    document.getElementById("nextQuestion").onclick = function () { nextButton() };

    function nextButton() {
    if (counter >= myQuestions.length) {
    counter = 0;
    return;
    }
    counter++;
    buildQuiz();
    document.getElementById("nextQuestion").classList.add("d-none");
    document.getElementById("quizSubmit").classList.remove("d-none");
    };
<div id="quiz" class="quiz-container d-none">
    <div id="question" class="quiz-question"></div>
    <div id="container1" class="answer-container">
        <div id="ans1" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch1" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container2" class="answer-container">
        <div id="ans2" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch2" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container3" class="answer-container">
        <div id="ans3" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch3" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container4" class="answer-container">
        <div id="ans4" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch4" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container5" class="answer-container">
        <div id="ans5" class="answer"></div>
    </div>
    <button id="quizSubmit" class="quiz-submit btn btn-primary btn-lg">Check Answer</button>
    <button id="nextQuestion" class="quiz-submit btn btn-primary btn-lg d-none">Next Question</button>
</div>

1 Ответ

0 голосов
/ 25 марта 2020

В вашем коде много ошибок, довольно сложно расшифровать, что именно вы хотите делать.

До сих пор я внес эти изменения, чтобы попытаться дать вам минимальный воспроизводимый пример ( { ссылка })

Вам необходимо опубликовать некоторый код, который мы можем сами запустить и протестировать ({ ссылка }), попробуйте отредактировать ответ с помощью "фрагмента кода" опция. 

// VARIABLES
    const quizQuestion = document.getElementById('question');
    const answerOne = document.getElementById('ans1');
    const answerTwo = document.getElementById('ans2');
    const answerThree = document.getElementById('ans3');
    const answerFour = document.getElementById('ans4');
    const answerFive = document.getElementById('ans5');
    const answerOneContainer = document.getElementById('container1');
    const answerTwoContainer = document.getElementById('container2');
    const answerThreeContainer = document.getElementById('container3');
    const answerFourContainer = document.getElementById('container4');
    const answerFiveContainer = document.getElementById('container5');

    // QUIZ QUESTIONS ARRAY

    const myQuestions = [
    {
    question: "Starting with the most put these countries in order of total population",
    answers: [
        { "correct_order": 5, "details": "Ireland" },
        { "correct_order": 2, "details": "United States" },
        { "correct_order": 3, "details": "Russia" },
        { "correct_order": 1, "details": "China" },
        { "correct_order": 4, "details": "United Kingdom" }
    ]
    },
    {
    question: "Starting with the most put these countries in order of size",
    answers: [
        { "correct_order": 2, "details": "Canada" },
        { "correct_order": 5, "details": "Ireland" },
        { "correct_order": 3, "details": "Australia" },
        { "correct_order": 4, "details": "Mexico" },
        { "correct_order": 1, "details": "Russia" }
    ]
    },
    {
    question: "Starting with the most put these languages in order of most spoken",
    answers: [
        { "correct_order": 2, "details": "English" },
        { "correct_order": 5, "details": "Arabic" },
        { "correct_order": 3, "details": "Hindustani" },
        { "correct_order": 4, "details": "Spanish" },
        { "correct_order": 1, "details": "Mandarin Chinese" }
    ]
    }
    ]

    // BUILD QUIZ FUNCTION

    document.getElementById("start-quiz").onclick = buildQuiz;

    let counter = 0;

    function buildQuiz() {
    //document.getElementById("callout").classList.add("d-none");
    document.getElementById("quiz").classList.remove("d-none");
    quizQuestion.innerHTML = myQuestions[counter].question;
    answerOne.innerHTML = myQuestions[counter].answers[0].details;
    answerTwo.innerHTML = myQuestions[counter].answers[1].details;
    answerThree.innerHTML = myQuestions[counter].answers[2].details;
    answerFour.innerHTML = myQuestions[counter].answers[3].details;
    answerFive.innerHTML = myQuestions[counter].answers[4].details;    
    };
    
        // SWAP ANSWERS FUNCTION

    let answerContainers = {
      container1: answerOneContainer,
      container2: answerTwoContainer,
      container3: answerThreeContainer,
      container4: answerFourContainer,
      container5: answerFiveContainer
    }

    function swapAnswersContainer(switchButton, container1, container2) {
    document.getElementById(switchButton).addEventListener('click', () => {
      $("#" + container1).children(":first").slideToggle('fast');
      $("#" + container2).children(":first").slideToggle('fast', function () {
          answerContainers[container2].appendChild(answerContainers[container1].firstElementChild);
          answerContainers[container1].appendChild(answerContainers[container2].firstElementChild);
      });
      $("#" + container1).children(":first").slideToggle('fast');
      $("#" + container2).children(":first").slideToggle('fast');
      });
    }

    swapAnswersContainer("switch1", "container1", "container2");
    swapAnswersContainer("switch2", "container2", "container3");
    swapAnswersContainer("switch3", "container3", "container4");
    swapAnswersContainer("switch4", "container4", "container5");

    // CHECK ANSWER FUNCTION

    document.getElementById("quizSubmit").onclick = checkAnswer;

    function checkAnswer() {
      document.getElementById("quizSubmit").classList.add("d-none");
      document.getElementById("nextQuestion").classList.remove("d-none");
      let score = 0;
      if (answerOneContainer.firstElementChild["correct_order"] === "1") {
      document.getElementById("container1").classList.add("green-border")
      } else {
      document.getElementById("container1").classList.add("red-border")
      }
    };

    // NEXT QUESTION FUNCTION

    document.getElementById("nextQuestion").onclick = nextButton;

    function nextButton() {
      if (counter >= myQuestions.length) {
        counter = 0;
        return;
      }
      counter++;
      buildQuiz();
      document.getElementById("nextQuestion").classList.add("d-none");
      document.getElementById("quizSubmit").classList.remove("d-none");
    };
<div id="quiz" class="quiz-container d-none">
    <div id="question" class="quiz-question"></div>
    <div id="container1" class="answer-container">
        <div id="ans1" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch1" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container2" class="answer-container">
        <div id="ans2" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch2" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container3" class="answer-container">
        <div id="ans3" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch3" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container4" class="answer-container">
        <div id="ans4" class="answer"></div>
    </div>
    <div class="button-container">
        <button id="switch4" class="btn-style"><i class="fas fa-sync switch-button"></i></button>
    </div>
    <div id="container5" class="answer-container">
        <div id="ans5" class="answer"></div>
    </div>
    <button id="quizSubmit" class="quiz-submit btn btn-primary btn-lg">Check Answer</button>
    <button id="nextQuestion" class="quiz-submit btn btn-primary btn-lg d-none">Next Question</button>
    <button id="start-quiz" class="quiz-submit btn btn-primary btn-lg d-none">Start Quiz</button>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...