Images are not displaying on a webpage and the rest is working fine! I am not getting any kind of errors, Some questions have the same images.
JSON FILE (quiz.json) I have around 1000 questions and answers with images stored in a JSON file.
[
{
"img": "./img_sign/550.png",
"q": "In una carreggiata del tipo rappresentato si puu00f2 sorpassare anche in curva",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "La carreggiata del tipo rappresentato u00e8 a doppio senso di circolazione",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "In una carreggiata extraurbana del tipo rappresentato le corsie interne sono, di norma, riservate al sorpasso",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "In una carreggiata del tipo rappresentato non si puu00f2 effettuare l'inversione di marcia",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "In una carreggiata extraurbana del tipo rappresentato si puu00f2 sorpassare indifferentemente sia da destra che da sinistra",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "In una carreggiata extraurbana del tipo rappresentato si puu00f2 sempre marciare per file parallele",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/550.png",
"q": "In una carreggiata del tipo rappresentato possiamo iniziare un sorpasso anche se il conducente che sta dietro ha giu00e0 iniziato la stessa manovra",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "Nella strada rappresentata, per ogni senso di marcia, la corsia di destra u00e8, di norma, dedicata alla marcia ordinaria",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "La strada rappresentata u00e8 composta da tre corsie per ogni senso di marcia",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "Nella strada rappresentata, per ogni senso di marcia, le corsie di centro e di sinistra sono dedicate, di norma, al sorpasso",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "La strada rappresentata u00e8 composta da una carreggiata",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "Nella strada rappresentata, per ogni senso di marcia, la corsia di centro u00e8 dedicata, di norma, alla marcia ordinaria",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "Nella strada rappresentata, per ogni senso di marcia, la corsia di destra u00e8 dedicata, di norma, al sorpasso",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "La strada rappresentata u00e8 composta da due carreggiate",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/552.png",
"q": "Nella strada rappresentata, per ogni senso di marcia, la corsia di sinistra u00e8 dedicata, di norma, alla marcia ordinaria",
"a": "false", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "La strada rappresentata u00e8 composta da tre carreggiate",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "La strada rappresentata u00e8 composta da otto corsie",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "Nella strada rappresentata le carreggiate laterali sono, di norma, a senso unico",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "Nella strada rappresentata la carreggiata centrale u00e8, di norma, a doppio senso di circolazione",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "La strada rappresentata consente, di norma, il sorpasso anche in curva",
"a": "true", "options": ["true", "false"]
},
{
"img": "./img_sign/562.png",
"q": "La strada rappresentata u00e8 composta da quattro carreggiate, tutte a senso unico",
"a": "false", "options": ["true", "false"]
}
]
Quiz.jsx This is my code
import { useState, useEffect } from "react";
import questionsData from "../components/quiz.json";
function App() {
const [questions, setQuestions] = useState([]);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [showScore, setShowScore] = useState(false);
const [score, setScore] = useState(0);
useEffect(() => {
// Shuffle the array of questions
const shuffledQuestions = shuffleArray(questionsData);
// Slice the array to get the first 30 questions
const selectedQuestions = shuffledQuestions.slice(0, 30);
setQuestions(selectedQuestions);
}, []);
const shuffleArray = (array) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};
const handleAnswerOptionClick = (selectedOption) => {
if (selectedOption === questions[currentQuestionIndex]?.a) {
setScore(score + 1);
}
const nextQuestionIndex = currentQuestionIndex + 1;
if (nextQuestionIndex < questions.length) {
setCurrentQuestionIndex(nextQuestionIndex);
} else {
setShowScore(true);
}
};
const restartQuiz = () => {
// Shuffle the array of questions again
const shuffledQuestions = shuffleArray(questionsData);
// Slice the array to get the first 30 questions
const selectedQuestions = shuffledQuestions.slice(0, 30);
setQuestions(selectedQuestions);
setCurrentQuestionIndex(0);
setShowScore(false);
setScore(0);
};
const calculateResult = () => {
const passingScore = 27; // Set the passing score here
if (score >= passingScore) {
return <p className="text-green-500">Congratulations! You passed.</p>;
} else {
return <p className="text-red-500">Sorry! You failed.</p>;
}
};
return (
<div className="App bg-gray-100 min-h-screen flex justify-center items-center">
{showScore ? (
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">
You scored {score} out of {questions.length}
</h1>
<h2 className="text-xl mb-2">
You answered {score} questions correctly.
</h2>
{calculateResult()}
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={restartQuiz}
>
Restart Quiz
</button>
</div>
) : (
<div className="text-center">
<h2 className="text-xl mb-2">
Question {currentQuestionIndex + 1} of {questions.length}
</h2>
<h1 className="text-4xl font-bold mb-4">
{decodeURIComponent(questions[currentQuestionIndex]?.q)}
</h1>
<img
src={questions[currentQuestionIndex]?.img}
alt="Question"
className="max-w-full mb-4"
/>
<div className="grid grid-cols-2 gap-4">
{questions[currentQuestionIndex]?.options.map((option, index) => (
<button
key={index}
className="bg-white hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded"
onClick={() => handleAnswerOptionClick(option)}
>
{decodeURIComponent(option)}
</button>
))}
</div>
</div>
)}
</div>
);
}
export default App;
Any suggestions would be helpful Thank you!