Looking to toggle visibility on multiple divs with an onclick button in Jquery?

Lately, I've been struggling to make my code display questions in a specific order. My goal is to have the next question show up once the submit button is pressed, while hiding the previous one.

Currently, I'm developing a game similar to Family Feud where each question should appear at the top of the screen until the user submits an answer. At this stage, I haven't created a function for submitting answers; my focus has been on making the questions appear and disappear upon clicking the submit button. You can check out my progress so far by following this link:

https://repl.it/E36p/0

I managed to hide all the questions except the first one, and after hitting submit, the second question is displayed. However, I'm facing issues with showing the subsequent question while hiding the current one. It seems like both the 2nd and 3rd questions are being shown together instead.

I've experimented with different solutions, including using the toggle method and creating an array called 'questions' to see if that would work. Unfortunately, none of these approaches helped me achieve the desired outcome. Any assistance would be greatly appreciated.

Thank you!

Answer №1

  1. Begin by loading your questions using a json session wizard variable
  2. Develop a method called ej app.wizard.render(), which controls the display of the next question. You can use a template (jsrender, dot.js) to render the wizard question and display the next one.
  3. Implement a method called app.wizard.send(), in which you send a response, load the active question's response, and render the following question.

To load questions, utilize jquery ajax to retrieve them in order and store them in session.wizard.questions

Next, call app.wizard.render() to display the first question without a response

When the user submits their response, send it to the server, load the response into session.wizard.questions, and call app.wizard.render().

I have provided a basic sample for you:

Code codepen

You will need to create ajax calls to fetch queries and send responses

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

Tips for maintaining a fixed height for a div while its content is being updated

<div id='wrapT'>some content here</div> <div id='btnsT'> <img id='prev' src='btns/prev_01.png' alt='prev'> <img id='next' src='btns/next_01.png' alt='next ...

What is the best way to generate JSX from a callback function in ChartJS?

I am currently utilizing react-chartjs-2 within a React application and I am interested in incorporating JSX code into the Y axis. However, when attempting to do so, it only shows [Object object]. const chart = new Chart(ctx, { type: 'line', ...

How can I find the week of the month using Moment.js? (similar to Google Calendar)

Currently leveraging the fantastic features of Moment.js, I am facing a dilemma. How can I determine which week of the month a particular date falls into? The documentation for Moment js only seems to provide information on "week of year." For instance, if ...

What could be causing my Angular Ngrx app's state not to render properly on the application?

Is there a way to automatically render the state when the app loads without having to click a button? I am currently facing an issue where the state is empty until I manually trigger the click function by pressing a button. I have tried using this.store.se ...

Why does the pound symbol in z-index always show up in Angular?

Having an issue with my code where I set a z-index in the CSS like this: .mat-mini-fab { position: absolute; right: 5px; top: 4px; z-index: 999; box-shadow: none !important; } However, whenever I visit my site, the z-index is not being appl ...

Opt for a line break over a semicolon when using jQuery

I need assistance with breaking the line wherever a semicolon is present. var locdata = { "locations": [{ "id": 0, "name": 'USA', "cx": 100, "cy": 100, "address":'545, 8t ...

Getting Permission in the latest Facebook JavaScript SDK: A Step-by-Step Guide

I've been working on transitioning to the new Facebook JavaScript SDK from the old JavaScript library (where I was using Connect) and unfortunately, I'm facing issues with getting the permission dialog to pop up. My goal is to display the permiss ...

Could someone please assist me in improving my comprehension of this tutorial?

I am currently working my way through a tutorial I found on this website. The tutorial appears to cover everything I need, but I'm struggling to grasp some of the concepts. It could be because I don't have enough knowledge about Xval and jquery. ...

Using jQuery to select elements with specific innerHTML values

$('.select option:selected[innerHTML="5"]') In this case, I am attempting to choose an option that is currently selected and has innerHTML that perfectly matches a specific string (for example: "5") For reference, here is a fiddle link: http:// ...

Display confirmation dialog after saving data, prior to redirecting back to the same page or refreshing

On my aspx page, there is a feature that allows users to edit data in a database record. Once the changes are saved, the user is redirected back to the same page. What I am trying to achieve is a popup message saying "Record saved." along with an "OK" butt ...

Using HTML and JavaScript to add variables into the URL within the window.location

I have been struggling to incorporate longitude and latitude into the URL. Despite researching various topics online, I have not found a solution that works for me. Below is the HTML code that showcases the issue. When you click the "Show Position" button ...

What is the best way to assign a value to the param tag of an applet using JavaScript variables

This is my external javaScript file named myJs.js function search(){ var hint = document.getElementById("sChoice").value; var item = document.getElementById("sKey").value; document.getElementById("c").value=hint; document.getElementById ...

What is the best way to eliminate particular elements from a nested JSON payload in JavaScript?

I am in need of creating a function that can scan through a nested JSON structure to locate specific elements and delete all occurrences of those elements, even if they are within an array. Consider this JSON example: { "userId": "John991", "grou ...

Guide to installing a dynamic favicon on a Next.js application for a specific route

I am trying to set up different favicons for my Next.js app based on the route. Here is where I want to implement this feature, displaying the country's flag as the favicon when a user navigates to that specific page. Below is the code snippet from m ...

Searching for answers for Pyramid and AJAX (Jquery) inquiries

If I have a file named somefunction.py in my Pyramid package directory and I want to use $.post to call this function, what URL should I specify to invoke this function? Assuming I have a view function called aview defined in views.py, can I access this ...

The useEffect function is repeatedly making API calls within a component, despite not having any dependencies specified

As a newcomer to React.Js, I'm encountering an issue with useEffect repeatedly calling an API without any specified Dependency. Is there another approach I should consider? The relevant file is located at: /pages/dashboard/speaking/[slug].js } else i ...

What is the best way to display a multi-level sub-menu in front of its parent menu?

Code: nav#desktop-nav ul li > ul { position: relative; margin-top: 0; text-align: left; opacity: 0; visibility: hidden; position: absolute; top: 100%; transform: scaleY(0); transform-origin: 0 0 0; transition: al ...

Guide to creating a CSS horizontal line with square elements on either side of a title

I am currently working on how to create a horizontal line with small squares on each side of an h1 title. I have managed to achieve the horizontal line using code from a similar question, but I am struggling to add the square elements to the design. https ...

Placing a function within an array raises the question: why is the array's value represented as an integer?

There's something puzzling happening in my code. I've placed a setTimeout function inside an array, but when I check the contents of the array using console.log(arr), it only shows an integer value. How is this possible? See the code snippet belo ...

What is the process through which Generator.next() works with its parameter?

According to the documentation, it mentions that "You can also provide a parameter to the next method to send a value to the generator." But where exactly does it send this value to? Let's consider these 3 different generator functions: function* fi ...