mirror of
https://github.com/LucasVbr/nuitdelinfo-2023.git
synced 2026-05-13 17:21:56 +00:00
salaheddine benkhanous
120 lines
3.2 KiB
HTML
120 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Mon site ecolo | Jeu </title>
|
|
<link rel="icon" href="img/logo.svg" type="image/svg">
|
|
<link rel="stylesheet" href="style/init.css">
|
|
<link rel="stylesheet" href="style/navbarVertical.css">
|
|
<link rel="stylesheet" href="style/jeu.css">
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar" id="navbar">
|
|
<div class="nav-links">
|
|
<div class="logo">
|
|
<img src="./img/logo.svg" alt="Logo" width="40">
|
|
</div>
|
|
|
|
<a href="#" class="nav-link">Commerces</a>
|
|
<a href="#" class="nav-link">Habitats</a>
|
|
<a href="#" class="nav-link">Phénomènes</a>
|
|
<a href="#" class="nav-link">Energies</a>
|
|
<a href="#" class="nav-link">Transports</a>
|
|
</div>
|
|
|
|
<div class="arrow">
|
|
<label for="toggleNavbar">
|
|
<img src="./img/arrow.svg" alt="arrow" width="10">
|
|
</label>
|
|
<input id="toggleNavbar" type="checkbox">
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="starContainer">
|
|
<div class="star" id="star5"></div>
|
|
<div class="star" id="star4"></div>
|
|
<div class="star" id="star3"></div>
|
|
<div class="star" id="star2"></div>
|
|
<div class="star" id="star1"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="choices">
|
|
<section id="left">
|
|
<img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
|
|
</section>
|
|
|
|
<section id="right">
|
|
<img class="image" id="imgright" src="./img/imgright.webp" alt="imgright">
|
|
</section>
|
|
</div>
|
|
|
|
<div class="question">
|
|
<h2>Question</h2>
|
|
<p>Lorem ipsum</p>
|
|
<button class="hide">Question suivante</button>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
const rightSection = document.getElementById('right');
|
|
const leftSection = document.getElementById('left');
|
|
const buttonElement = document.querySelector('button');
|
|
|
|
rightSection.addEventListener('click', () => {
|
|
rightSection.classList.remove('hide');
|
|
leftSection.classList.add('hide');
|
|
buttonElement.classList.remove('hide');
|
|
});
|
|
|
|
leftSection.addEventListener('click', () => {
|
|
leftSection.classList.remove('hide');
|
|
rightSection.classList.add('hide');
|
|
buttonElement.classList.remove('hide');
|
|
});
|
|
|
|
buttonElement.addEventListener('click', () => {
|
|
augmenterCompteur();
|
|
buttonElement.classList.add('hide');
|
|
|
|
rightSection.classList.remove('hide');
|
|
leftSection.classList.remove('hide');
|
|
});
|
|
|
|
let score = 20;
|
|
|
|
function augmenterCompteur() {
|
|
score += 5;
|
|
|
|
if (score >= 5) {
|
|
document.getElementById('star1').style.visibility = 'visible';
|
|
}
|
|
if (score >= 10) {
|
|
document.getElementById('star2').style.visibility = 'visible';
|
|
}
|
|
if (score >= 15) {
|
|
document.getElementById('star3').style.visibility = 'visible';
|
|
}
|
|
|
|
if (score >= 20) {
|
|
document.getElementById('star4').style.visibility = 'visible';
|
|
}
|
|
|
|
if (score >= 25) {
|
|
document.getElementById('star5').style.visibility = 'visible';
|
|
}
|
|
|
|
if (score === 25) {
|
|
window.location.href = './easterEggEtoile.html';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |