Calculator Tools Calculator Tools
Create

Question Marks Everywhere - A Fun Question & Answer Game

Aug 1, 2025

About this app

Join 'Question Marks Everywhere', a fun and colorful trivia game where users can answer endless questions and challenge their friends.

Question Marks Everywhere - A Fun Question & Answer Game

Related apps

Put this on your site

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>Question Marks Everywhere - A Fun Question & Answer Game</title>
<meta name="description" content="Join 'Question Marks Everywhere', a fun and colorful trivia game where users can answer endless questions and challenge their friends.">
<meta name="keywords" content="trivia, questions, quiz, fun, gaming, knowledge, challenge">

<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const questions = [
{question: "What is the capital of France?", answer: "Paris"},
{question: "What is 2 + 2?", answer: "4"},
{question: "Who wrote 'Hamlet'?", answer: "William Shakespeare"},
{question: "What is the largest planet in our Solar System?", answer: "Jupiter"},
{question: "What is the boiling point of water in Celsius?", answer: "100"}
];

let currentQuestionIndex = 0;
let score = 0;

function showQuestion() {
const questionContainer = $("#question-container");
if (currentQuestionIndex < questions.length) {
questionContainer.html(`<h2>${questions[currentQuestionIndex].question}</h2>` +
'<input type="text" id="user-answer" class="form-control my-2" placeholder="Your answer...">' +
'<button id="submit-btn" class="btn btn-primary">Submit Answer</button>');
} else {
endGame();
}
}

function endGame() {
$("#main-container").html(`<h2>Your Score: ${score} / ${questions.length}</h2>` +
`<button id="restart-btn" class="btn btn-success">Play Again</button>`);
$("#restart-btn").click(function() {
score = 0;
currentQuestionIndex = 0;
showQuestion();
});
}

$("#main-container").on('click', '#submit-btn', function() {
const userAnswer = $("#user-answer").val().trim();
if (userAnswer.toLowerCase() === questions[currentQuestionIndex].answer.toLowerCase()) {
score++;
alert("Correct!");
} else {
alert("Wrong! The correct answer was: " + questions[currentQuestionIndex].answer);
}
currentQuestionIndex++;
showQuestion();
});

showQuestion();
});
} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(to right, #84fab0, #8fd3f4);
color: #333;
font-family: 'Arial', sans-serif;
}
#main-container {
text-align: center;
margin-top: 100px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background-color: white;
}
h2 {
color: #4A66E4;
}
.btn {
border-radius: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>