How can I select all class tag and set it to object tags in fewer lines

const btn_start = document.getElementById("start");
let container = document.getElementById("container");
let questionTag = document.getElementById("question");
let answerTag = document.getElementsByClassName("answer");

btn_start.addEventListener("click", startQuiz);

const myQuestions = [
    {
        question: "What's 2+2?",
        answers: [
            { text: "4", correct: true },
            { text: "2", correct: false },
            { text: "10", correct: false },
            { text: "1", correct: false },
        ],
    },
];

function startQuiz() {
    container.style.visibility = "visible";
    btn_start.style.visibility = "hidden";
    showQuestion();
}

function showQuestion() {
    questionTag.innerText = myQuestions[0].question;
    answerTag[0].innerHTML = myQuestions[0].answers[0].text
    answerTag[1].innerHTML = myQuestions[0].answers[1].text
    answerTag[2].innerHTML = myQuestions[0].answers[2].text
    answerTag[3].innerHTML = myQuestions[0].answers[3].text
}

.answers button{
    display: block;
    width: 100%;
    height: 45px;
    margin-bottom: 5px;
    background-color: white;
    border: 1.5px solid lightblue;
    cursor: pointer;
    border-radius: 5px;
}

    <button id="start" type="button">Start quiz</button>
    <div id="container">
        <h2>Quiz</h2>
           
        </div>
                <h3 id="question"></h3>
        <div class="answers">
            <button id="answer1" class="answer"></button>
            <button id="answer2" class="answer"></button>
            <button id="answer3" class="answer"></button>
            <button id="answer4" class="answer"></button>
        </div>

Instead of having to assign each answer tag to one of the answers in my object. How can it be done randomly? and assigned to a random answer tag. can math.random be used on objects and than on my buttons to randomly assign?

Solution 1:

Look at the problem in a more general view. Ask yourself: "What is this code supposed to do at its most basic level?"

I'd answer...

Take a question and its associated answers, then display that question and display its answers in random order.

So your HTML has slots for the question's text and four answers. We should look at those generally as well. answer1 is just a slot to hold one of our question's four available answers. It doesn't have to show just Answer #1 for Question #1.

// Shuffling an array is a little harder than it seems at first. I'm
// importing the Lodash library here because it provides a function for
// randomizing an array.
const _ = require('lodash');

// This function takes an object parameter that matches the shape of
// the question-and-answers objects in your original code.
// {
//     question: string;
//     answers: { text: string; correct: boolean; }[];
// }
function showQuestion(questionAndAnswers) {

    // Randomly order the answers.
    const shuffledAnswers = _.shuffle(questionAndAnswers.answers);

    // Set the question tag's text to the question text provided.
    questionTag.innerText = questionAndAnswers.question;

    // For each of the answers that we shuffled, populate the answer
    // tag of the same index with the answer's text.
    // For answers ['Car', 'Bike', 'Train', 'Plane'],
    // 'Car' goes into Tag[0]
    // 'Bike' goes into Tag[1]
    // ...etc
    shuffledAnswers.forEach((answer, idx) => {
        answerTag[idx] = answer.text;
    });
}

Now with this general purpose function that takes some object containing your question and the available answers (like you already have), we can display the questions with ease.

function startQuiz() {
    // Your original code omitted...

    // Extract the 0th element from the list of questions, then display it.
    showQuestion( myQuestions[0] );
}

When it's time to move to the next question...

let currentQuestion = 0;
btn_next_question.addEventListener("click", showNextQuestion);

function showNextQuestion() {
    currentQuestion = currentQuestion + 1;
    showQuestion( myQuestions[currentQuestion] );
}

Take another look at the answer to the question posed at the beginning. The showQuestion() function fulfills this general description of the problem. For any pair of a question and its answers, showQuestion() will fill in the necessary HTML elements to display the question and display its answers in random order. The logic from your original code has been recycled, but now it's more general, working with an arbitrary value instead of fixed values.