In my opinion it would be better to use HTML, PHP, JavaScript with Ajax (I use FETCH) and of course a Database table.
Here’s my main section of my HTML page:
<main id="content" class="checkStyle">
<div class="displayStatus">
<span id="clock"></span>
<h4 class="displayTitle">Pepster's Online Trivia</h4>
<p class="triviaInfo">I'm adding more categories to my online trivia game and hopefully make it appeal to more people! I am still keep the photography category,
but I am adding two new categories (movie and space). I am going to make a better scoring feature and have daily challenges as well a monthly challenges!</p>
<p>I'm still keeping the feature where a member can add questions to the online trivia database and be able to select the category of their liking, but the questions/answers will have to be approved by me first.</p>
<p>You must register to become a Member and validate your email address before you can add questions. You don't have to add questions as you username will show up on the high scores table.</p>
<div id="startBtn">
<form id="game_category" action="game.php" method="post">
<select id="category" class="select-css" name="category" tabindex="1">
<option selected disabled>Select a Category</option>
<option value="photography">Photography</option>
<option value="movie">Movie</option>
<option value="space">Space</option>
</select>
</form>
</div>
</div>
<div id="quiz" class="displayMessage" data-username="<?= $username ?>">
<div class="triviaContainer" data-records=" ">
<div id="mainGame">
<div id="current">Question No. <span id="currentQuestion"></span></div>
<div id="triviaSection" data-correct="">
<div id="questionBox">
<h2 id="question">What is the Question?</h2>
</div>
<div id="buttonContainer"></div>
</div>
<div id="headerStyle" data-user="">
<div class="gauge">
<div class="gauge__body">
<div class="gauge__fill"></div>
<div class="gauge__cover">Power 100%</div>
</div>
</div>
<p id="score">0 Points</p>
<p id="percent">100% Correct</p>
<button id="next" class="nextBtn">Next</button>
</div>
</div>
</div>
</div>
<div id="finalResult">
<h2>Game Over!</h2>
<p><?= $username ?> ended up with <span class="totalScore"></span> points and answered <span
class="answeredRight"></span> right.</p>
<a class="btn1" href="game.php" title="Quiz">Play Again?</a>
</div>
</main>
Here’s a small section of my JavaScript file:
/* Success function utilizing FETCH */
const quizUISuccess = (parsedData) => {
console.log('trivia data', parsedData);
mainGame.style.display = 'grid';
d.getElementById('content').scrollIntoView();
//gameData = parsedData;
gameData = parsedData.sort(() => Math.random() - .5); // randomize questions:
totalQuestions = parseInt(gameData.length);
createQuiz(gameData[gameIndex]);
};
/* If Database Table fails to load then answer a few hard coded Q&A */
const quizUIError = (error) => {
/*
* If game database table fails to load then give a few questions
* and answers, so that the game will still work properly.
*/
failed = true;
mainGame.style.display = 'grid';
d.getElementById('content').scrollIntoView();
console.log("Database Table did not load", error);
gameData = [{
"id": 1,
"user_id": 1,
"hidden": "no",
"question": "[Blank] is the length of time when the film or digital sensor inside the camera is exposed to light, also when a camera's shutter is open when taking a photograph. The amount of light that reaches the film or image sensor is proportional to the [Blank].",
"category": "photography",
"answers": [
"Shutter Speed or Exposure Time",
"ISO",
"",
""
]
},
{
"id": 2,
"user_id": 1,
"hidden": "no",
"question": "[Blank] was one of the earliest photographers in American history, best known for his scenes of the Civil War. He studied under inventor Samuel F. B. Morse, who pioneered the daguerreotype technique in America. [Blank] opened his own studio in New York in 1844, and photographed Andrew Jackson, John Quincy Adams, and Abraham Lincoln, among other public figures.",
"category": "photography",
"answers": [
"Robert Capa",
"Steve McCurry",
"Ansel Adams",
"Matthew Brady"
]
}
]
totalQuestions = gameData.length;
//console.log(gameData[gameIndex]);
createQuiz(gameData[gameIndex]);
};
/* create FETCH request */
const createRequest = (url, succeed, fail) => {
fetch(url)
.then((response) => handleErrors(response))
.then((data) => succeed(data))
.catch((error) => fail(error));
};
/*
* Start Game by Category
*/
const selectCat = function (category) {
const requestUrl = `${quizUrl}category=${category}`;
createRequest(requestUrl, quizUISuccess, quizUIError);
};
Here’s the cool part of the JavaScript Code:
/* Populate Question, Create Answer Buttons */
const createQuiz = (gameData) => {
startTimer(dSec);
question.textContent = gameData.question;
/*
* Create Buttons then insert answers into buttons that were
* create.
*/
gameData.answers.forEach((value, index) => {
let gameButton = buttonContainer.appendChild(d.createElement('button'));
gameButton.id = 'answer' + (index + 1);
gameButton.className = 'answerButton';
gameButton.setAttribute('data-correct', (index + 1).toString());
gameButton.addEventListener('click', clickHandler, false);
/*
* Don't Show Answers that have a Blank Field
*/
if (value !== "") {
gameButton.appendChild(d.createTextNode("📷 " + value));
} else {
gameButton.appendChild(d.createTextNode(" "));
gameButton.style.pointerEvents = "none"; // Disable Click on Empty Field
}
});
};
I won’t bore you will more of the coding, but you can find the whole thing here:
Feel free to copy it, use part of it or just get some ideas from it. The only thing I ask is if you do the first 2 give me credit somewhere in the coding.
