mirror of
https://github.com/resendecode/nuitdelinfo.git
synced 2026-05-14 01:31:55 +00:00
salaheddine benkhanous
173 lines
5.7 KiB
HTML
173 lines
5.7 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>
|
|
<script src="../back/fonctions.js"></script>
|
|
<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">
|
|
<div id='lefttext' class="text-overlay"></div>
|
|
</section>
|
|
|
|
<section id="right">
|
|
<img class="image" id="imgright" src="./img/imgright.webp"
|
|
alt="imgright">
|
|
<div id='righttext' class="text-overlay">Votre texte ici</div>
|
|
</section>
|
|
</div>
|
|
|
|
|
|
<div class="question">
|
|
<h2 id="qtype">Question</h2>
|
|
<p id="qid">Lorem ipsum</p>
|
|
<button class="hide" onclick="next()">Question suivante</button>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
const rightSection = document.getElementById('right');
|
|
const leftSection = document.getElementById('left');
|
|
const buttonElement = document.querySelector('button');
|
|
let questioncount = 0;
|
|
|
|
let categories = ["Transport","Habitat","Commerce","phenomene_naturelle","sources_energetiques"];
|
|
let catcursor = 0;
|
|
|
|
rightSection.addEventListener('click', () => {
|
|
rightSection.classList.remove('hide');
|
|
leftSection.classList.add('hide');
|
|
buttonElement.classList.remove('hide');
|
|
document.getElementById('qid').innerHTML = getDescription(categories[catcursor],questioncount);
|
|
document.getElementById('qtype').innerHTML = getVrai(categories[catcursor],questioncount,1);
|
|
});
|
|
|
|
leftSection.addEventListener('click', () => {
|
|
leftSection.classList.remove('hide');
|
|
rightSection.classList.add('hide');
|
|
buttonElement.classList.remove('hide');
|
|
document.getElementById('qid').innerHTML = getDescription(categories[catcursor],questioncount,0);
|
|
document.getElementById('qtype').innerHTML = getVrai(categories[catcursor],questioncount,0);
|
|
});
|
|
|
|
buttonElement.addEventListener('click', () => {
|
|
augmenterCompteur();
|
|
buttonElement.classList.add('hide');
|
|
|
|
rightSection.classList.remove('hide');
|
|
leftSection.classList.remove('hide');
|
|
document.getElementById('imgleft').src = getImg1(categories[catcursor],questioncount);
|
|
document.getElementById('imgright').src = getImg2(categories[catcursor],questioncount);
|
|
document.getElementById('qid').innerHTML = getTitre(categories[catcursor],questioncount);
|
|
document.getElementById('lefttext').innerHTML = getRep1(categories[catcursor],questioncount);
|
|
document.getElementById('righttext').innerHTML = getRep2(categories[catcursor],questioncount);
|
|
document.getElementById('qtype').innerHTML = "Question";
|
|
});
|
|
|
|
let score = 0;
|
|
|
|
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';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
document.getElementById('imgleft').src = getImg1(categories[catcursor],questioncount);
|
|
document.getElementById('imgright').src = getImg2(categories[catcursor],questioncount);
|
|
document.getElementById('qid').innerHTML = getTitre(categories[catcursor],questioncount);
|
|
document.getElementById('lefttext').innerHTML = getRep1(categories[catcursor],questioncount);
|
|
document.getElementById('righttext').innerHTML = getRep2(categories[catcursor],questioncount);
|
|
|
|
/*const tableauIndex = [0, 1, 2, 3, 4];
|
|
index = getIndex(tableauIndex);
|
|
const indice = getIndex('Transport');
|
|
getCategoryQuestion("Transport", indice); // Assuming you want the first question*/
|
|
|
|
});
|
|
|
|
function next(){
|
|
if(questioncount >4){
|
|
questioncount = 0;
|
|
catcursor++;
|
|
|
|
}else{
|
|
questioncount++;
|
|
|
|
}
|
|
|
|
if(catcursor > 4){
|
|
catcursor = 0;
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
|
|
</html>
|