# Trivia quiz app using an API

**URL:** <https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536>\
**Category:** Uncategorized\
**Created:** [November 6, 2021, 10:02pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536 "2021-11-06T22:02:06Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [November 6, 2021, 10:02pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/1 "2021-11-06T22:02:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [November 7, 2021, 2:31am UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/2 "2021-11-07T02:31:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [November 7, 2021, 9:11pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/3 "2021-11-07T21:11:59Z")

</div>

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](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);  
});  
};

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 8, 2021, 5:02pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/4 "2021-11-08T17:02:12Z")

</div>

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?

> **[CodePen](https://codepen.io/)**
>
> An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

---

<div class="post-metadata">

**Author:** ![stekon](https://avatars.discourse-cdn.com/v4/letter/s/9fc29f/32.png) [@stekon](https://forum.kirupa.com/u/stekon)\
**Post date:** [November 8, 2021, 5:26pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/5 "2021-11-08T17:26:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 8, 2021, 8:01pm UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/6 "2021-11-08T20:01:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [November 9, 2021, 3:37am UTC](https://forum.kirupa.com/t/trivia-quiz-app-using-an-api/649536/7 "2021-11-09T03:37:35Z")

</div>

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.