I'm currently working on developing a quiz website where the quiz content is stored in JSON files. While the functionality works fine, I'm looking to enhance it by adding a unique image to each question stored in the JSON file. To achieve this, I am considering creating another object within the JSON structure as shown below:
[
{"adImage" : "images/NoOvertake.jpg"}
],
[
{
"question" : "Before making a U-turn in the road you should always:",
"answers":[
{"id" : 0, "text" : "Select a higher gear than normal"},
{"id" : 1, "text" : "Signal so that other drivers can slow down"},
{"id" : 2, "text" : "Look over your shoulder for final confirmation"},
{"id" : 3, "text" : "Give another signal as well as using your indicators"}
],
"correct" : [2],
"allAns":[]
},
{
"question" : "As a driver, what do you understand by the term 'Blind Spot'?",
"answers" : [
{"id" : 0, "text" : "An area covered by your left-hand mirror" },
{"id" : 1, "text" : "An area not covered by your headlights" },
{"id" : 2, "text" : "An area covered by your right-hand mirror" },
{"id" : 3, "text" : "An area not covered by your mirrors" }
],
"correct" : [3],
"allAns":[]
}
]
Previously, the JavaScript function worked fine until I added the image object above the questions. Now, neither the questions nor the images are displaying. I would appreciate any guidance, suggestions, or alternative solutions on how to incorporate the images into the quiz. What HTML code should I use to display the image along with each question?
Thank you in advance for your assistance!