Trivia quiz app using an API

1

Can someone please help me with making a trivia quiz

  1. Using fetches to pull random questions using a single category in the API
  2. Create an input form that accepts a user’s input
    3.Present a single question to the user
  3. Allow the user to respond to the question in a string
  4. Determine if the user’s answer was correct
  • A correct answer awards 1 point and continues the game. After point has been awarded, show user that they answered correctly by giving them a congratulatory message and showing them their new score. once the message is gone, a new question is displayed.
  • An incorrect answer resets the game and resets the score to zero (0)
  • Keep track of and display a user’s score
    Thanks in advance for the help.
2

Have a crack at it and if you have any problems that you cant figure out post them on here.
Maybe the Open Trivia database is what you want. I thinks its a Rest API.

1 Like
3
  1. Using fetches to pull random questions using a single category in the API
  2. Create an input form that accepts a user’s input
    3.Present a single question to the user
  3. Allow the user to respond to the question in a string
  4. Determine if the user’s answer was correct
  • A correct answer awards 1 point and continues the game. After point has been awarded, show user that they answered correctly by giving them a congratulatory message and showing them their new score. once the message is gone, a new question is displayed.
  • An incorrect answer resets the game and resets the score to zero (0)
  • Keep track of and display a user’s score

Below is how far I could go. Need help to complete the rest of the steps. Thanks in advance for the help.

let main = document.getElementById(“answer”)
let random = Math.floor(Math.random() * 355237) + 1
const nextbutton = document.getElementById(“nextbutton”);
console.log(nextbutton)
let answer = “”
let number = 0
let dataArray = []
nextbutton.addEventListener(‘click’, function () {
console.log(nextbutton)
number++;
document.getElementById(“answer”).innerHTML = “Display Answer”;
getData()
})
fetch( “https://opentdb.com/api.php?amount=10&category=9&difficulty=easy&type=multiple”
)
.then(response => response.json())
.then(data => {
dataArray.push(data)
console.log(dataArray[0].clues[number].question)
answer = dataArray[0].clues[number].answer;
let question = dataArray[0].clues[number].question; let category = dataArray[0].clues[number].category.title;
console.log(question + ": " + answer);
document.getElementById(“question”).innerHTML = question
document.getElementById(“answer”).innerHTML = answer;
document.getElementById(“category”).innerHTML = "

Category: " + category + “

”;
const scoreText = document.getElementById(“score”);
document.getElementById(“answer”).style.display = “block”;
let definitiveAnswer = document.getElementById(“checkUpAnswer”);
let loadAnswer = document.getElementById(“answer”);
loadAnswer.addEventListener(“submit”, (event) => {
event.preventDefault();
$(’#score’).html(${trivia.totalCorrect} of ${trivia.totalAnswered} Correct);
});
}).catch((error) => {
console.error(error);
});
};

4

This is a good start. Can you please post this into a Codepen so it is easier for us to see how your app works?

5

I have posted it and the Title is yLojjjd. Thanks.

6

Your code isn’t compiling. Do you have an updated version where you have addressed that? Right now, the code you have provided doesn’t actually run or do the initial heavy lifting that you have defined.

One thing that sticks out is that quotation marks are angled or “smart”. You should replace those with the " and ’ characters.

7

First off I’d break up your code into a few different functions.

Thinking basic you will probably want functions that:

  • start quizz (will there be options for how hard ect?)
  • fetch (json() and .catch())
  • hold state (maybe generator)
  • check answer ( either regex or string.split() then match)
  • on correct answer (cycle next)
  • on incorrect (restart)
  • restart quizz (wipe and fetch)

By splitting it up you can logically think about it better, work on and debug 1 function at a time.

1 Like