Trivia Game
About this app
Test your knowledge with this fun trivia game!
Trivia Game
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Trivia Game</title>
<meta name="description" content="Test your knowledge with this fun trivia game!">
<meta name="keywords" content="trivia, game, knowledge, fun">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// Trivia Questions
const triviaQuestions = [
{
question: "What is the capital city of France?",
options: ["Paris", "London", "Rome", "Madrid"],
answer: 0
},
{
question: "Who painted the Mona Lisa?",
options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],
answer: 0
},
{
question: "What is the largest planet in our solar system?",
options: ["Jupiter", "Saturn", "Neptune", "Earth"],
answer: 0
},
{
question: "Which country is home to the kangaroo?",
options: ["Australia", "Brazil", "Canada", "India"],
answer: 0
},
{
question: "What is the tallest mountain in the world?",
options: ["Mount Everest", "K2", "Kangchenjunga", "Makalu"],
answer: 0
}
];
// Generate Random Number within range
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Shuffle Array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// Generate Trivia Game
function generateTriviaGame() {
const triviaContainer = document.getElementById("trivia-container");
triviaContainer.innerHTML = "";
const shuffledQuestions = shuffleArray(triviaQuestions);
let questionNumber = 1;
shuffledQuestions.forEach((questionObj) => {
const questionCard = document.createElement("div");
questionCard.classList.add("card", "mb-3");
const cardHeader = document.createElement("div");
cardHeader.classList.add("card-header");
cardHeader.innerText = "Question " + questionNumber;
questionCard.appendChild(cardHeader);
const cardBody = document.createElement("div");
cardBody.classList.add("card-body");
cardBody.innerHTML = `
<h5 class="card-title">${questionObj.question}</h5>
<div class="options">
${questionObj.options
.map(
(option, index) =>
`<div class="form-check">
<input class="form-check-input" type="radio" name="question-${questionNumber}" id="question-${questionNumber}-option-${index}" value="${index}">
<label class="form-check-label" for="question-${questionNumber}-option-${index}">
${option}
</label>
</div>`
)
.join("")}
</div>
`;
questionCard.appendChild(cardBody);
triviaContainer.appendChild(questionCard);
questionNumber++;
});
const submitButton = document.createElement("button");
submitButton.classList.add("btn", "btn-primary");
submitButton.innerText = "Submit";
submitButton.addEventListener("click", calculateScore);
triviaContainer.appendChild(submitButton);
}
// Calculate and Display Score
function calculateScore() {
const triviaContainer = document.getElementById("trivia-container");
const triviaCards = triviaContainer.getElementsByClassName("card");
let correctAnswers = 0;
Array.from(triviaCards).forEach((card, index) => {
const selectedOption = card.querySelector(`input[name="question-${index + 1}"]:checked`);
if (selectedOption) {
const answerIndex = parseInt(selectedOption.value);
if (answerIndex === triviaQuestions[index].answer) {
correctAnswers++;
card.classList.add("correct");
} else {
card.classList.add("incorrect");
}
}
});
const totalQuestions = triviaQuestions.length;
const score = (correctAnswers / totalQuestions) * 100;
const scoreContainer = document.createElement("div");
scoreContainer.classList.add("score-container");
const scoreHeading = document.createElement("h3");
scoreHeading.innerText = "Your Score:";
scoreContainer.appendChild(scoreHeading);
const scorePercentage = document.createElement("h1");
scorePercentage.innerText = `${score}%`;
scoreContainer.appendChild(scorePercentage);
triviaContainer.innerHTML = "";
triviaContainer.appendChild(scoreContainer);
}
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
generateTriviaGame();
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Roboto', sans-serif;
background-color: #f8f9fa;
}
#main-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-header {
background-color: #007bff;
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.card-body {
padding: 20px;
}
.card-title {
font-size: 18px;
margin-bottom: 15px;
}
.options {
margin-top: 10px;
}
.form-check {
margin-bottom: 10px;
}
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.correct {
background-color: #d4edda;
}
.incorrect {
background-color: #f8d7da;
}
.score-container {
text-align: center;
}
.score-container h3 {
margin-bottom: 20px;
}
.score-container h1 {
font-size: 48px;
color: #007bff;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="trivia-container"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!