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
back/fonctions.js
+15 -6
View File
@@ -157,7 +157,7 @@ function getImg2(categorie, indice){
async function getQuestionByCategorie2(category) { async function getQuestionByCategorie2(category) {
try { try {
const response = await fetch(`./${category}.json`); const response = await fetch(`./resources/${category}.json`);
if (!response.ok) { if (!response.ok) {
throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`); throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
@@ -201,14 +201,23 @@ async function getQuestionByCategorie2(category) {
return indicesArray.shift(); return indicesArray.shift();
} }
const votreTableau = await getQuestionByCategorie2('transport'); // const votreTableau = await getQuestionByCategorie2('transport');
const shuffledIndices = createShuffledIndicesArray(votreTableau); // const shuffledIndices = createShuffledIndicesArray(votreTableau);
// À chaque appel, récupérez le prochain indice async function main() {
const premierIndice = getNextIndex(shuffledIndices); // Faites quelque chose avec votreTableau
const votreTableau = await getQuestionByCategorie2('Transport');
const shuffledIndices = createShuffledIndicesArray(votreTableau);
const premierIndice = getNextIndex(shuffledIndices);
const deuxiemeIndice = getNextIndex(shuffledIndices); const deuxiemeIndice = getNextIndex(shuffledIndices);
console.log(premierIndice); // Indice aléatoire console.log(premierIndice); // Indice aléatoire
console.log(deuxiemeIndice); // Indice différent console.log(deuxiemeIndice);
}
main();
// À chaque appel, récupérez le prochain indice
// Indice différent
back/resources/Transport.json
+5 -5
View File
@@ -17,7 +17,7 @@
"description":"Les voitures individuelles, en particulier celles qui fonctionnent aux carburants fossiles, ont souvent une consommation élevée de carburant par kilomètre parcouru, ce qui contribue aux émissions de gaz à effet de serre." "description":"Les voitures individuelles, en particulier celles qui fonctionnent aux carburants fossiles, ont souvent une consommation élevée de carburant par kilomètre parcouru, ce qui contribue aux émissions de gaz à effet de serre."
}, },
{ {
"text": "Le réseau de trains à grande vitesse (TGV) en France est-il souvent salué pour ses faibles émissions de gaz à effet de serre, principalement grâce à l'utilisation d'énergies renouvelables pour son fonctionnement ?", "question": "Le réseau de trains à grande vitesse (TGV) en France est-il souvent salué pour ses faibles émissions de gaz à effet de serre, principalement grâce à l'utilisation d'énergies renouvelables pour son fonctionnement ?",
"options": [ "options": [
{ {
"text": "Vrai", "text": "Vrai",
@@ -33,7 +33,7 @@
}, },
{ {
"text": "Comment la France encourage-t-elle l'adoption de véhicules électriques?", "question": "Comment la France encourage-t-elle l'adoption de véhicules électriques?",
"options": [ "options": [
{ {
"text":"Par des incitations fiscales", "text":"Par des incitations fiscales",
@@ -48,7 +48,7 @@
"description":" le gouvernement français offre des avantages fiscaux, tels que des réductions d'impôts ou des crédits d'impôt, pour inciter les citoyens à opter pour des véhicules électriques. Ces incitations fiscales visent à stimuler le marché des véhicules électriques en rendant ces alternatives plus attrayantes sur le plan financier, contribuant ainsi à réduire les émissions de gaz à effet de serre liées au secteur des transports." "description":" le gouvernement français offre des avantages fiscaux, tels que des réductions d'impôts ou des crédits d'impôt, pour inciter les citoyens à opter pour des véhicules électriques. Ces incitations fiscales visent à stimuler le marché des véhicules électriques en rendant ces alternatives plus attrayantes sur le plan financier, contribuant ainsi à réduire les émissions de gaz à effet de serre liées au secteur des transports."
}, },
{ {
"text": "Quelle ville française a mis en œuvre un système de location de vélos très populaire pour promouvoir des modes de transport plus durables?", "question": "Quelle ville française a mis en œuvre un système de location de vélos très populaire pour promouvoir des modes de transport plus durables?",
"options": [ "options": [
{ {
"text": "Paris", "text": "Paris",
@@ -60,10 +60,10 @@
} }
], ],
"reponse": 0, "reponse": 0,
"description":"Paris a mis en place un système de location de vélos, connu sous le nom de "Vélib'", pour encourager des modes de transport durables. Cette initiative vise à réduire la dépendance aux véhicules individuels motorisés." "description":"Paris a mis en place un système de location de vélos, connu sous le nom de velib, pour encourager des modes de transport durables. Cette initiative vise à réduire la dépendance aux véhicules individuels motorisés."
}, },
{ {
"text": "Le réseau de trains à grande vitesse (TGV) en France utilise-t-il principalement des énergies renouvelables, ce qui contribue à des émissions de gaz à effet de serre plus faibles ?", "question": "Le réseau de trains à grande vitesse (TGV) en France utilise-t-il principalement des énergies renouvelables, ce qui contribue à des émissions de gaz à effet de serre plus faibles ?",
"options": [ "options": [
{ {
"text": "Vrai", "text": "Vrai",
back/script.js
-62
View File
@@ -25,65 +25,3 @@ function fonction_marrante() {// Charger le contenu du fichier JSON
} }
// retourne random index
async function getQuestionByCategorie2(category) {
try {
const response = await fetch(`./${category}.json`);
if (!response.ok) {
throw new Error(`Erreur de chargement du fichier JSON : ${response.status}`);
}
const objetJson = await response.json();
const questions = objetJson.questions;
console.log(questions);
return questions;
} catch (error) {
console.error('Erreur lors du chargement du fichier JSON :', error.message);
alert('Erreur lors du chargement du fichier JSON. Consultez la console pour les détails.');
throw error; // Re-throw the error for further handling
}
}
console.log(getQuestionByCategorie2("transport"))
function shuffleArray(array) {
const shuffledArray = [...array];
for (let i = shuffledArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
}
return shuffledArray;
}
function createShuffledIndicesArray(array) {
const indicesArray = Array.from({ length: array.length }, (_, index) => index);
return shuffleArray(indicesArray);
}
function getNextIndex(indicesArray) {
if (indicesArray.length === 0) {
// Si tous les indices ont été utilisés, réinitialiser le tableau d'indices
return null; // ou une autre valeur pour indiquer que tous les indices ont été utilisés
}
// Retourner et retirer le premier indice du tableau
return indicesArray.shift();
}
// Utilisez ces fonctions comme suit :
// const votreTableau = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
const votreTableau = await getQuestionByCategorie2('transport');
const shuffledIndices = createShuffledIndicesArray(votreTableau);
// À chaque appel, récupérez le prochain indice
const premierIndice = getNextIndex(shuffledIndices);
const deuxiemeIndice = getNextIndex(shuffledIndices);
console.log(premierIndice); // Indice aléatoire
console.log(deuxiemeIndice); // Indice différent
front/index.html
+1 -1
View File
@@ -33,7 +33,7 @@
Testez-vous dès maintenant pour une expérience éducative et Testez-vous dès maintenant pour une expérience éducative et
amusante. amusante.
</p> </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> </main>
front/jouer.html
+81 -82
View File
@@ -1,120 +1,119 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site ecolo | Jeu </title> <title>Mon site ecolo | Jeu </title>
<link rel="icon" href="img/logo.svg" type="image/svg"> <link rel="icon" href="img/logo.svg" type="image/svg">
<link rel="stylesheet" href="style/init.css"> <link rel="stylesheet" href="style/init.css">
<link rel="stylesheet" href="style/navbarVertical.css"> <link rel="stylesheet" href="style/navbarVertical.css">
<link rel="stylesheet" href="style/jeu.css"> <link rel="stylesheet" href="style/jeu.css">
</head> </head>
<body> <body>
<nav class="navbar" id="navbar"> <nav class="navbar" id="navbar">
<div class="nav-links"> <div class="nav-links">
<div class="logo"> <div class="logo">
<img src="./img/logo.svg" alt="Logo" width="40"> <img src="./img/logo.svg" alt="Logo" width="40">
</div> </div>
<a href="#" class="nav-link">Commerces</a> <a href="#" class="nav-link">Commerces</a>
<a href="#" class="nav-link">Habitats</a> <a href="#" class="nav-link">Habitats</a>
<a href="#" class="nav-link">Phénomènes</a> <a href="#" class="nav-link">Phénomènes</a>
<a href="#" class="nav-link">Energies</a> <a href="#" class="nav-link">Energies</a>
<a href="#" class="nav-link">Transports</a> <a href="#" class="nav-link">Transports</a>
</div> </div>
<div class="arrow"> <div class="arrow">
<label for="toggleNavbar"> <label for="toggleNavbar">
<img src="./img/arrow.svg" alt="arrow" width="10"> <img src="./img/arrow.svg" alt="arrow" width="10">
</label> </label>
<input id="toggleNavbar" type="checkbox"> <input id="toggleNavbar" type="checkbox">
</div> </div>
</nav> </nav>
<div id="starContainer"> <div id="starContainer">
<div class="star" id="star5"></div> <div class="star" id="star5"></div>
<div class="star" id="star4"></div> <div class="star" id="star4"></div>
<div class="star" id="star3"></div> <div class="star" id="star3"></div>
<div class="star" id="star2"></div> <div class="star" id="star2"></div>
<div class="star" id="star1"></div> <div class="star" id="star1"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="choices"> <div class="choices">
<section id="left"> <section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png" <img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
alt="imgleft"> </section>
</section>
<section id="right"> <section id="right">
<img class="image" id="imgright" src="./img/imgright.webp" <img class="image" id="imgright" src="./img/imgright.webp" alt="imgright">
alt="imgright"> </section>
</section>
</div> </div>
<div class="question"> <div class="question">
<h2>Question</h2> <h2>Question</h2>
<p>Lorem ipsum</p> <p>Lorem ipsum</p>
<button class="hide">Question suivante</button> <button class="hide">Question suivante</button>
</div> </div>
</div>
<script>
const rightSection = document.getElementById('right');
const leftSection = document.getElementById('left');
const buttonElement = document.querySelector('button');
<script> rightSection.addEventListener('click', () => {
const rightSection = document.getElementById('right'); rightSection.classList.remove('hide');
const leftSection = document.getElementById('left'); leftSection.classList.add('hide');
const buttonElement = document.querySelector('button'); buttonElement.classList.remove('hide');
});
rightSection.addEventListener('click', () => { leftSection.addEventListener('click', () => {
rightSection.classList.remove('hide'); leftSection.classList.remove('hide');
leftSection.classList.add('hide'); rightSection.classList.add('hide');
buttonElement.classList.remove('hide'); buttonElement.classList.remove('hide');
}); });
leftSection.addEventListener('click', () => { buttonElement.addEventListener('click', () => {
leftSection.classList.remove('hide'); augmenterCompteur();
rightSection.classList.add('hide'); buttonElement.classList.add('hide');
buttonElement.classList.remove('hide');
});
buttonElement.addEventListener('click', () => { rightSection.classList.remove('hide');
augmenterCompteur(); leftSection.classList.remove('hide');
buttonElement.classList.add('hide'); });
rightSection.classList.remove('hide'); let score = 20;
leftSection.classList.remove('hide');
});
let score = 20; function augmenterCompteur() {
score += 5;
function augmenterCompteur() { if (score >= 5) {
score += 5; document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 5) { if (score >= 10) {
document.getElementById('star1').style.visibility = 'visible'; document.getElementById('star2').style.visibility = 'visible';
} }
if (score >= 10) { if (score >= 15) {
document.getElementById('star2').style.visibility = 'visible'; document.getElementById('star3').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>
</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> </body>