Home>

We become indebted to.
Currently, I am creating the following quiz app using JavaScript.

However, the current operation does not work as follows even if the answer button is pressed.

As a result of adding the necessary functions at hand, I do not know what is wrong. (Crying)
Please let me know if you have any details or understanding. Please!

● Source code

<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><title>Document</title><link rel = "stylesheet" href = "style.css"></head><body> <script src = "js/quiz.js"></script><script src = "js/main.js"></script></body></html>
.quiz {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.active {
  opacity: 1;
  z-index: 2;
}
.content {
  border-top: 1px solid # 000;
  border-bottom: 1px solid # 000;
  margin: 20px 0;
  padding: 10px 0;
}
const allPages = document.getElementsByClassName ('quiz');
let pageNum = 0;
// Function to make the next page active
const showPage = (n) =>{
  allPages [pageNum] .classList.remove ('active');
  allPages [n] .classList.add ('active');
  pageNum = n;
  if (pageNum === allPages.length) {
    pageNum = 0;
  }
}
// Create a default page and make it active
const defaultPage = new createQuizElement ('Welcome','','','Click the button below to get started','Start','','','','default');
defaultPage.createElement ();
showPage (0);
let buttons = document.querySelectorAll ('.btn');
// Activate the click event when any of the defaultButtons buttons are pressed
for (let i = 0;i<buttons.length;i ++) {
  buttons [i] .addEventListener ('click', () =>{
    const getFetchQuizData = () =>{
      return new Promise ((resolve, reject) =>{
        // Display the wording "acquiring"
        const startPage = new createQuizElement ('Getting','','','Please wait.','','','','',' start');startPage.createElement ();
        console.log (allPages);
        showPage (1);
        // Fetch and get quiz data
        const quiz = new Quiz ('https://opentdb.com/api.php?amount=10&type=multiple');
        resolve (quiz.fetchQuizData ());
        reject ();
      });
    }
    // Display the acquired quiz data
    getFetchQuizData ()
    .then (jsonData =>{
      jsonData.results.forEach ((quizdata, index) =>{
        // Create all question sentences and contents
        const qe = new createQuizElement (`problem ${index + 1}`, `[genre] ${quizdata.category}`, `[difficulty] ${quizdata.difficulty}`, quizdata.question, quizdata.correct_answer, quizdata .incorrect_answers [0],

 quizdata.incorrect_answers [1],

 quizdata.incorrect_answers [2],

 index);
        qe.createElement ();
      });
      // Create the final page
      const endPage = new createQuizElement ('Your number of correct answers is 〇〇!','','','Click the button below to try again!','Return to home','','', '','end');
      endPage.createElement ();
      showPage (2);
    });
    // Press any button to activate the event
    let buttons = document.querySelectorAll ('.btn');
    for (let i = 0;i<buttons.length;i ++) {
      buttons [i] .addEventListener ('click', () =>{
        if (i + 3! == allPages.length) {
          showPage (i + 3);
        } else {
          showPage (0);
        }
      })
    }
  });
}
class createQuizElement {
  constructor (title, category, difficulty, content, btn1, btn2, btn3, btn4, uniq) {
    this.title = title;
    this.category = category;
    this.difficulty = difficulty;
    this.content = content;
    this.btn1 = btn1;
    this.btn2 = btn2;
    this.btn3 = btn3;
    this.btn4 = btn4;
    this.uniq = uniq;
  }
  createElement () {
    // Create      const quizDiv = document.createElement ('div');
    quizDiv.classList.add ('quiz');
    quizDiv.setAttribute ('id', this.uniq);
    // Create titleDiv and add to quizDiv
    const titleDiv = document.createElement ('h2');
    titleDiv.textContent = this.title;
    quizDiv.appendChild (titleDiv);
    // Create categoryDiv and add to quizDiv
    const categoryDiv = document.createElement ('h4');categoryDiv.textContent = this.category;
    quizDiv.appendChild (categoryDiv);
    // Create a difficultyDiv and add it to the quizDiv
    const difficultyDiv = document.createElement ('h4');
    difficultyDiv.textContent = this.difficulty;
    quizDiv.appendChild (difficultyDiv);
    // Create contentDiv and add to quizDiv
    const contentDiv = document.createElement ('div');
    contentDiv.textContent = this.content;
    contentDiv.classList.add ('content');
    quizDiv.appendChild (contentDiv);
    // Create button1 and add it to quizDiv
    if (this.btn1 ==='') {
    } else {
      const btn1 = document.createElement ('button');
      btn1.textContent = this.btn1;
      btn1.classList.add ('btn');
      quizDiv.appendChild (btn1);
    };
    // Create button2 and add it to quizDiv
    if (this.btn2 ==='') {
    } else {
      const btn2 = document.createElement ('button');
      btn2.textContent = this.btn2;
      btn2.classList.add ('btn');
      quizDiv.appendChild (btn2);
    };
    // Create button3 and add it to quizDiv
    if (this.btn3 ==='') {
    } else {
      const btn3 = document.createElement ('button');
      btn3.textContent = this.btn3;
      btn3.classList.add ('btn');
      quizDiv.appendChild (btn3);
    };
    // Create button4 and add it to quizDiv
    if (this.btn4 ==='') {
    } else {
      const btn4 = document.createElement ('button');
      btn4.textContent = this.btn4;
      btn4.classList.add ('btn');
      quizDiv.appendChild (btn4);
    };
    // Add quizDiv to body
    document.getElementById ('container'). AppendChild (quizDiv);
  }
}
class Quiz {
  constructor (url) {
    this.url = url;
  }
  fetchQuizData () {
    return fetch (this.url)
    .then (response =>{
      if (response.ok) {
        return response.json ();
      } else {
        throw new Error ();
      }
    })
    .catch ((error) =>console.log (error));
  }
}