366 lines
13 KiB
PHP
366 lines
13 KiB
PHP
<?php
|
|
session_start();
|
|
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
|
|
header("Cache-Control: post-check=0, pre-check=0", false);
|
|
header("Pragma: no-cache");
|
|
|
|
if (!isset($_SESSION['streak'])) {
|
|
$_SESSION['streak'] = 0;
|
|
}
|
|
|
|
$questions = [
|
|
[
|
|
'question' => 'What is the impact of climate change on the planet?',
|
|
'options' => [
|
|
'Rising sea levels',
|
|
'More natural disasters',
|
|
'Increased temperatures globally',
|
|
'All of the above'
|
|
],
|
|
'answer' => 'All of the above'
|
|
],
|
|
[
|
|
'question' => 'Heat waves enter the atmosphere and are trapped because of the thick layer of gases that surround the planet. This is called…',
|
|
'options' => [
|
|
'Thick Atmosphere Effect',
|
|
'Greenhouse Effect',
|
|
'Increasing Heat Effect',
|
|
'None of the above'
|
|
],
|
|
'answer' => 'Greenhouse Effect'
|
|
],
|
|
[
|
|
'question' => 'When did climate change begin?',
|
|
'options' => [
|
|
'When the Industrial Revolution began',
|
|
'When the world population was larger than two billion people',
|
|
'It always has existed',
|
|
'Yesterday!'
|
|
],
|
|
'answer' => ['When the Industrial Revolution began', 'It always has existed']
|
|
]
|
|
];
|
|
|
|
$question_index = isset($_GET['q']) ? (int)$_GET['q'] : 0;
|
|
|
|
if ($question_index === 0) {
|
|
unset($_SESSION['quiz_completed_reward']);
|
|
}
|
|
|
|
$feedback = '';
|
|
|
|
if (isset($_POST['answer'])) {
|
|
$selected_answer = $_POST['answer'];
|
|
$correct_answer = $questions[$question_index]['answer'];
|
|
|
|
$is_correct = false;
|
|
if (is_array($correct_answer)) {
|
|
if (in_array($selected_answer, $correct_answer)) {
|
|
$is_correct = true;
|
|
}
|
|
} else {
|
|
if ($selected_answer == $correct_answer) {
|
|
$is_correct = true;
|
|
}
|
|
}
|
|
|
|
if ($is_correct) {
|
|
$feedback = '<div class="feedback correct" style="padding: 0;"><p style="padding: 16px 16px 0; margin: 0;">Correct! Great job.</p><img src="assets/pasted-20251004-232406-9a846679.png" alt="Happy Chircuit" class="feedback-image"></div>';
|
|
$question_index++;
|
|
} else {
|
|
$_SESSION['streak'] = 0;
|
|
$feedback = '<div class="feedback incorrect">Not quite! Try again.<br><img src="assets/pasted-20251005-145045-e02a01f3.png" alt="Sad Chircuit" class="feedback-image-incorrect"></div>';
|
|
}
|
|
}
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Trivia Quiz - Chirivia</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary-green: #2E8B57;
|
|
--secondary-blue: #4682B4;
|
|
--accent-color: #5F9EA0;
|
|
--background-light: #F0F8FF;
|
|
--surface-white: #FFFFFF;
|
|
--text-dark: #2F4F4F;
|
|
--font-headings: 'Inter', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--spacing-base: 8px;
|
|
--border-radius: 0.5rem;
|
|
}
|
|
body {
|
|
font-family: var(--font-body);
|
|
background-color: var(--background-light);
|
|
color: var(--text-dark);
|
|
margin: 0;
|
|
line-height: 1.6;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
.quiz-container {
|
|
background: var(--surface-white);
|
|
padding: calc(var(--spacing-base) * 4);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
text-align: center;
|
|
}
|
|
h1 {
|
|
font-family: var(--font-headings);
|
|
color: var(--primary-green);
|
|
}
|
|
.question {
|
|
font-size: 1.25rem;
|
|
margin-bottom: calc(var(--spacing-base) * 2);
|
|
}
|
|
.options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-base);
|
|
margin-bottom: calc(var(--spacing-base) * 3);
|
|
}
|
|
.option-button {
|
|
background-color: #eee;
|
|
border: 2px solid #ddd;
|
|
padding: calc(var(--spacing-base) * 1.5);
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
width: 100%;
|
|
font-size: 1rem;
|
|
}
|
|
.option-button:hover {
|
|
background-color: #ddd;
|
|
border-color: #ccc;
|
|
}
|
|
.feedback {
|
|
padding: calc(var(--spacing-base) * 2);
|
|
border-radius: var(--border-radius);
|
|
margin-top: calc(var(--spacing-base) * 2);
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
}
|
|
.feedback.correct {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.feedback.incorrect {
|
|
background-color: #E0E0E0;
|
|
color: #2F4F4F;
|
|
}
|
|
.next-button {
|
|
background-color: var(--accent-color);
|
|
color: var(--surface-white);
|
|
padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
a {
|
|
color: var(--primary-green);
|
|
display: inline-block;
|
|
margin-top: calc(var(--spacing-base) * 2);
|
|
}
|
|
.feedback-image {
|
|
max-width: 200px;
|
|
display: block;
|
|
margin: 10px auto;
|
|
}
|
|
.feedback-image-incorrect {
|
|
max-width: 100px;
|
|
display: block;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
/* Chat Widget */
|
|
.chat-widget-container {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
}
|
|
.chat-bubble {
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: var(--secondary-blue);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
transition: transform 0.2s;
|
|
}
|
|
.chat-bubble:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
.chat-window {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 80px;
|
|
right: 0;
|
|
width: 350px;
|
|
max-width: 90vw;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
|
flex-direction: column;
|
|
}
|
|
.chat-header {
|
|
background: var(--secondary-blue);
|
|
color: white;
|
|
padding: 15px;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.chat-header p {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
.close-chat {
|
|
cursor: pointer;
|
|
font-size: 24px;
|
|
}
|
|
.chat-body {
|
|
padding: 15px;
|
|
height: 300px;
|
|
overflow-y: auto;
|
|
background: #f9f9f9;
|
|
}
|
|
.message {
|
|
margin-bottom: 15px;
|
|
}
|
|
.message p {
|
|
background: #e9e9eb;
|
|
padding: 10px 15px;
|
|
border-radius: 15px;
|
|
display: inline-block;
|
|
max-width: 80%;
|
|
margin: 0;
|
|
}
|
|
.chat-footer {
|
|
padding: 15px;
|
|
display: flex;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
.chat-footer input {
|
|
flex: 1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 20px;
|
|
padding: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
.chat-footer button {
|
|
background: var(--secondary-blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="quiz-container">
|
|
<h1>Trivia Quiz</h1>
|
|
<?php if ($question_index < count($questions)) {
|
|
$current_question = $questions[$question_index];
|
|
?>
|
|
<p class="question"><?php echo $current_question['question']; ?></p>
|
|
<?php echo $feedback; ?>
|
|
<form method="POST" action="quiz.php?q=<?php echo $question_index; ?>">
|
|
<div class="options">
|
|
<?php foreach ($current_question['options'] as $option) { ?>
|
|
<button type="submit" name="answer" value="<?php echo htmlspecialchars($option); ?>" class="option-button"><?php echo htmlspecialchars($option); ?></button>
|
|
<?php } ?>
|
|
</div>
|
|
</form>
|
|
<?php
|
|
} else {
|
|
if (!isset($_SESSION['quiz_completed_reward'])) {
|
|
$_SESSION['streak']++;
|
|
$_SESSION['quiz_completed_reward'] = true;
|
|
}
|
|
?>
|
|
<h2>Quiz Complete!</h2>
|
|
<p>You've answered all the questions! Your streak is now <?php echo $_SESSION['streak']; ?>!</p>
|
|
<div id="animation-container" style="position: relative; width: 200px; height: 200px; margin: 20px auto;">
|
|
<img src="assets/pasted-20251005-003819-6e811280.png" alt="Chircuit with a strawberry" class="anim-image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity 0.5s ease-in-out;">
|
|
<img src="assets/pasted-20251005-003524-d4bed2e1.png" alt="Chircuit eating a strawberry" class="anim-image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease-in-out;">
|
|
<img src="assets/pasted-20251005-004414-8785f3f1.png" alt="Happy Chircuit" class="anim-image" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.5s ease-in-out;">
|
|
</div>
|
|
<a href="index.php" class="next-button" style="margin-top: 20px;">Back to Home</a>
|
|
<?php } ?>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const images = document.querySelectorAll('#animation-container .anim-image');
|
|
if (images.length > 0) {
|
|
let currentIndex = 0;
|
|
setInterval(() => {
|
|
images[currentIndex].style.opacity = 0;
|
|
currentIndex = (currentIndex + 1) % images.length;
|
|
images[currentIndex].style.opacity = 1;
|
|
}, 2000);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- Chat Widget -->
|
|
<div class="chat-widget-container">
|
|
<div id="chat-bubble" class="chat-bubble">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
|
|
</div>
|
|
<div id="chat-window" class="chat-window">
|
|
<div class="chat-header">
|
|
<p>Chat with us!</p>
|
|
<span id="close-chat" class="close-chat">×</span>
|
|
</div>
|
|
<div class="chat-body">
|
|
<div class="message received">
|
|
<p>Hi there! How can I help you today?</p>
|
|
</div>
|
|
</div>
|
|
<div class="chat-footer">
|
|
<input type="text" placeholder="Type a message...">
|
|
<button>Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const chatBubble = document.getElementById('chat-bubble');
|
|
const chatWindow = document.getElementById('chat-window');
|
|
const closeChat = document.getElementById('close-chat');
|
|
|
|
chatBubble.addEventListener('click', () => {
|
|
chatWindow.style.display = 'flex';
|
|
chatBubble.style.display = 'none';
|
|
});
|
|
|
|
closeChat.addEventListener('click', () => {
|
|
chatWindow.style.display = 'none';
|
|
chatBubble.style.display = 'flex';
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|