Utilize different JSON files to load numerous JSON objects

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!

Answer №1

It is important to note that a valid JSON object should only have one root element. To ensure the validity of your JSON, consider using JSON linters such as http://jsonlint.com. It is recommended to follow a structured format similar to the one outlined below.

{
  "adImage": "images/NoOvertake.jpg",
  "questions": [
    {
      "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": []
    }
  ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message "TypeError: e.preventDefault is not a function" indicates that

I'm fairly new to JavaScript and jQuery, and I've incorporated two jQuery plugins into my code - jQuery form validator and jQuery form ajaxSubmit. Initially, everything was working fine with normal AJAX submission until I needed to post a file, w ...

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...

Vue alerts and pop-ups will only show once

Utilizing vue ui to create a new project with Babel and Lint, I integrated dependencies vuetify, vuetify-loader, and vue-bootstrap. My goal was to have a simple 'open dialog' button that would reveal a dialog defined in a separate component file. ...

Error message: "jQuery Ajax CORS request returning undefined value"

I am delving into the world of cross-domain Ajax requests for the first time by interacting with an API. Utilizing jQuery, I aim to extract specific elements from the response and display them on the webpage. Here is the code snippet for the request: $.a ...

Sharing VueJS router with child component

How do I pass the router to my child component? This is my current router setup: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) export default function () { const Router = new VueRouter({ mode: ' ...

Having difficulty choosing an item from a personalized autocomplete search bar in my Vue.js/Vuetify.js project

NOTE: I have opted not to use v-autocomplete or v-combobox due to their limitations in meeting my specific requirements. I'm facing difficulties while setting up an autocomplete search bar. The search functionality works perfectly except for one mino ...

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

Running two blocks of scripts (utilizing lab.js as a loading manager)

I am currently facing an issue where I am trying to load two separate blocks of `lab.js` in different locations. However, when I attempt to utilize functions from the second block that are called from files loaded in the first block, they are showing as un ...

Why does the for loop keep replacing the JSON objects within the array in PowerShell?

Here is the code snippet I've been working on using PowerShell: $ArrayOfArguments = @("Param1", "Param2", "Param3") $ArrayOfArgumentDescriptions = @("Description1", "Description2", "Description3&q ...

Creating dynamic flags with specific parameters using Pentaho and JavaScript

I am looking to optimize my code by finding a better way to achieve this. I have a variable called "hour" and I need to create flags for each hour of the day like so: if (hour == 0) {flag12AM = 'yes'} else {flag12AM == 'no'} if (hour ...

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

Issue encountered: ENOENT error - The specified file or directory does not exist. This error occurred while attempting to access a directory using the

I don't have much experience with nodejs or express, but I have an API running on http://localhost:3000. One of the endpoints triggers a function that uses the file system to read a file synchronously. However, when I send a post request using Postman ...

Securely accessing Service Stack REST API with AngularJS and $http.get by providing authentication details

Currently, I am utilizing a service stack web service that has the CorsFeature enabled. My approach involves calling a service using AngularJS's $http.get method while setting withCredentials to true: $http.get(url,{ withCredentials: true}) I am se ...

Extract the URL parameter and eliminate all characters following the final forward slash

Here is the URL of my website: example http://mypage.com/en/?site=main. Following this is a combination of JavaScript and PHP code that parses the data on the site. I am now looking for a piece of code that can dynamically change the URL displayed in the ...

Changing a field in AngularJS to set validity as true in a different way

After following the guidance provided in this answer to implement custom server-side validation for a unique email constraint, I encountered an issue with my submit function on the controller: function submit(form){ CompanyUser.save(vm.model) .suc ...

The file size exceeds the server's upload limit, despite making changes to the php.ini file

I've encountered a problem trying to upload an .OBJ file to the server, resulting in an 'Error 1' message. The uploaded file surpasses the upload_max_filesize directive specified in php.ini This error is detailed on this page - http://ph ...

Issue arises when attempting to transfer data collection object from Jquery ajax Method to MVC Controller resulting in null object being displayed

I am attempting to pass a data object to an MVC controller using a jQuery method. When I click the submit button, a data object is created in a JavaScript method. The data object is not null in the Ajax method. However, when I try to pass it to the MVC con ...

What is the best way to retrieve a property with a period in the method name in JavaScript?

One dilemma I'm facing is trying to access the tree.removenode method through chartContext in Angular. It's been a challenge for me to understand how to achieve this. https://i.stack.imgur.com/yG7uB.png ...

Rendering the HTML5 canvas within a console environment

I am looking to create images of humans on the console using nodejs. In order to achieve images of higher quality, I require a library or module that can facilitate drawing images in the console. Some options available include imaging and console-png. How ...

Obtaining Input Field Value in Angular Using Code

How can I pass input values to a function in order to trigger an alert? Check out the HTML code below: <div class="container p-5 "> <input #titleInput *ngIf="isClicked" type="text" class="col-4"><br& ...