lucasvbr/nuitdelinfo-2023
1
0
Fork 0
mirror of https://github.com/LucasVbr/nuitdelinfo-2023.git synced 2026-05-13 17:21:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Index Problem

Browse Source
This commit is contained in:
salaheddine benkhanous
2023-12-08 04:37:46 +01:00
parent 05f6282791
commit 35f774642f
5 changed files with 102 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/index.html
+1 -1
View File
@@ -33,7 +33,7 @@
Testez-vous dès maintenant pour une expérience éducative et
amusante.
</p>
<button id="btnjouer"><a href="./jouer.html"></a>Essayer ce jeu</button>
<button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
</main>
front/jouer.html
+81 -82
View File
@@ -1,120 +1,119 @@
<!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">
<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">
<nav class="navbar" id="navbar">
<div class="nav-links">
<div class="logo">
<img src="./img/logo.svg" alt="Logo" width="40">
</div>
<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>
<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">
<label for="toggleNavbar">
<img src="./img/arrow.svg" alt="arrow" width="10">
</label>
<input id="toggleNavbar" type="checkbox">
</div>
</nav>
</nav>
<div id="starContainer">
<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>
<div class="container">
<div class="container">
<div class="choices">
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft">
</section>
<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>
<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>
<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');
<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');
});
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');
});
leftSection.addEventListener('click', () => {
leftSection.classList.remove('hide');
rightSection.classList.add('hide');
buttonElement.classList.remove('hide');
});
buttonElement.addEventListener('click', () => {
augmenterCompteur();
buttonElement.classList.add('hide');
buttonElement.addEventListener('click', () => {
augmenterCompteur();
buttonElement.classList.add('hide');
rightSection.classList.remove('hide');
leftSection.classList.remove('hide');
});
rightSection.classList.remove('hide');
leftSection.classList.remove('hide');
});
let score = 20;
let score = 20;
function augmenterCompteur() {
score += 5;
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';
}
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';
}
</script>
</div>
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>