CSS and HTML design displaying JSON object inputs in a vertical order

Any assistance is deeply appreciated. I am currently developing a web interface for a grading system focused on SAT prep. The server is returning tests in the form of JSON objects, containing details such as test names, sections, and questions per section.

For instance, a segment of the JSON data for a specific test may appear as follows:

{"Section 1":[{"subject":"Writing","experimental":"0","manual_assign":"1","columns":"1","number":null,"difficulty":null,"answer":null}],"Section 2":[{"subject":"Critical Reading","experimental":"0","manual_assign":"0","columns":"4","number":"1","difficulty":"Easy","answer":"B"},...

My objective is to construct an HTML form based on this JSON object, with questions within each section displayed as vertically aligned inputs. The desired outcome should resemble the image provided:

I'm unsure about the most efficient approach to achieve this. Specifically, how can I generate columns of vertically ordered inputs like those shown in the image, taking into account that the number of questions may vary per section depending on the test being evaluated. Any guidance would be immensely valuable!

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

CoreOS experiencing connectivity issues with Kubernetes after a new installation

I am currently using a Vagrant VM for CoreOS (obtained from yungsang/coreos) on Windows 8.1. Following a guide I found here, I installed Kubernetes and created a json file for the pod using my own images. Whenever I run sudo ./kubecfg list /pods, I encou ...

The Responsiveness of Google Calendar

I currently run a WordPress website and have incorporated a Google calendar onto one of the pages. To ensure that the calendar is responsive on mobile devices, I am using the code below: .responsive-iframe-container { position: relative; padding-bottom: 5 ...

The height of my "img" element is not being fully matched by my "a" tag

As part of a project redesigning the Kurzgesagt home page, I encountered a challenge when trying to make my a tag stretch the full height of my img. The a tag was wrapping the img in the HTML code. Below is the code I used: HTML <a href="http://kurzg ...

The data returned from the PHP backend appears to be void

Currently, I am working on a temporary email website and one of the features that I need to incorporate is retrieving the origin of the email which involves accessing the email headers. I have written the following code snippets to achieve this: PHP Backe ...

Sending a JSON payload via a POST request to a Minimal API service

I have set up a minimal API service that uses MapPost: app.MapPost("/sendmessage", (RabbitMessage rm) => server.SendMessage(rm.exchange, rm.routingkey, rm.message)); app.Run(); record RabbitMessage(string exchange, string routingkey, string ...

Acquire a JSON response from a web address by utilizing JavaScript

If you navigate to , you will find a JSON file filled with information about your current geolocation. My goal is to save this JSON data into JavaScript variables, allowing me to manipulate and extract specific fields from the file. ...

The skybox in Three.JS is not appearing. Could there be an issue with the sizing or positioning?

Incorporating a small three.js scene into my project has been a challenge. I managed to create a skybox for the scene, but it's not appearing as expected. Interestingly, when I added a small box to the scene, it rendered perfectly. I suspect that the ...

What is the best way to convert this intricate Json Map Data into a Flutter ListView?

I am new to utilizing Flutter, and I have come across an API with a complex "MAP" JSON structure. My goal is to showcase a list of countries along with their details in a ListView within Flutter. How can I accomplish this task? Most of the solutions I foun ...

Ensure file size is compatible with JavaScript prior to uploading on IE9 browser

When a user attempts to upload a file in the IE 9 browser, an error is thrown on the line 'this.files[0].size;' because IE 9 does not support the HTML 5 API (FileReader). <input type="file" name="FileToUpload" id="FileToUpload" style="width ...

Attempting to extract individual strings from a lengthy compilation of headlines

Looking for a solution to organize the output from a news api in Python, which currently appears as a long list of headlines and websites? Here is a sample output: {'status': 'ok', 'totalResults': 38, 'articles': [{ ...

What is the limit on the amount of input data (in CSV or JSON format) that can be used to create a

Attempting to visualize a large dataset using D3.js has posed a challenge for me. The data size is 261 MB with approximately 400,000 rows in CSV format. Even when I attempt to run it with just 100,000 rows, the visualization does not appear on the browser. ...

Mobile-friendly HTML email design featuring bottom navigation bar

Currently, I am in the process of coding a responsive email template. Here is what I have so far: Click here to view <tr class="main_nav"> <td id="mobile_nav" width="600"> <table cellpadding="0" cellspacing="0" width="100%"> ...

Place the child atop the stacked blocks

I need the .square div to always remain at the top, creating a visual effect where it appears as if the following section with its own .square is sliding up and the .square halts precisely at the position of the previous section's square. The code sn ...

Extracting data from JSON column using a variable element name

I have a database table with JSON data that I need to decode and store in a relational database. The table is for an Oracle DB 19.0 and it looks like this: CREATE TABLE J_PAGE ( PK_PAGE_ID NUMBER ( 10 , 0 ) , FK_RESP_ID NUMBER ( 10 ...

Error found when employing absolute positioning and percentage values to vertically center a child div

There's a div that functions as my "popup," and I'm animating it to appear in the exact center of its parent div. To achieve this, I'm utilizing absolute positioning, negative margins, and adjusting the left and top properties. This allows m ...

Pressing the mouse on the div causes it to vanish until an animation is triggered

I am working with two objects: object1 and object2. object1 is set to have an animation delay of 0s object2 has an animation delay of 0.5s When you click on 1., both objects are assigned the class .animation, which works as expected. However, object2 wa ...

Merge two arrays with JSON data into a single array using Laravel in PHP

{"device_id":null,"collector_id":2} {"id":1,"name":"hello","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4d3e4d7cb968ac7cbc9">[email protected] ...

Apply a CSS class to the header cells

I'm facing a challenge with adding a CssClass to a table that is generated automatically through C#. The table creation code looks like this: TableHeaderRow header = new TableHeaderRow(); cell1 = new TableCell { Text = "Brand" }; cell2 = new TableCel ...

Tips for updating the class of a button as you switch between slides

My ionic slide box features 4 slides that can be navigated using buttons at the bottom of the screen or by finger-scrolling. The goal is to have the 'active' class added to the button corresponding to the currently active slide. For instance, if ...

Tips for designing a unique CSS ellipse effect for text styling

Hey there! I have a list of titles in a drop-down menu as strings, for example: "Bharat Untitled offer #564", "Bharat Untitled offer #563" The titles are quite long, so we want to display the first eight characters, followed by '...' and then ...