What is the best approach to retain the chosen responses within this Vue quiz platform?

As I develop a quiz application using Vue 3 and Bootstrap 4, I've implemented functionality for navigating through the quiz in both directions with methods like nextQuestion and prevQuestion.

My ultimate goal is to transform this app into a full-stack application, leveraging the Trivia API for additional features. Since the Trivia API cannot be modified, most of the logic will need to reside within Vue.

#quiz_app { height: 100vh; } .container { flex: 1; } ... <div id="quiz_app" class="container d-flex flex-column justify-content-center my-3"> <h2 class="display-4 category-name">Books</h2> <div class="questions d-flex flex-column align-items-center"> <div v-if="results.length" class="card shadow-sm" :class="{'bg-light': isScoreVisible}"> ... </div> </div> </div>.

The Challenge

One issue I'm facing is that when navigating back and forth between quiz questions, the selected answers are not retained or saved for future reference.

Queries

  1. Is there a dependable method in JavaScript to retain user-selected answers, or should I consider utilizing an API to store them in a database?
  2. If an API solution is required, would the Trivia API suffice, especially regarding its support for POST requests?
javascriptvue.jsvuejs3

Answer №1

To keep track of selected answers, you can store them in an array within the application state. Update the selectedAnswers field by initializing it as an empty array selectedAnswers = []. Then, whenever a user selects an answer, add that answer to the array at the corresponding question index.

I've made adjustments to your code below to achieve this functionality. While I couldn't implement conditional styling based on correct/incorrect answers due to my limited knowledge of Vue.js, I added a list item displaying "Your answer: ..." for demonstration purposes. Previous answers are retained when navigating back to previous questions.

You can easily modify the code further to render the selected answer differently using CSS classes, achieving the desired visual representation.

 Updated quizApp data and methods here...
 Updated CSS styles here... 
 Additional links and Vue initialization script here...

Answer №2

Upon reviewing your code and quiz behavior, it appears that the value of selectedAnswer is not being properly set in this object. It is important to ensure that when calling checkAnswer, the selectAnswer is also assigned within the object.

{
  question: 'Which character is not one of the three main witches in Terry Pratchett\'s Discworld novel "Wyrd Sisters"?',
  selectedAnswer: "",
  correct_answer: "Winny Hathersham",
  incorrect_answers: [
        "Granny Weatherwax",
        "Nanny Ogg",
        "Magrat Garlick"
  ]
}

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

Oops! Looks like there was an issue with the Json server - it seems there was

Hello everyone, I am currently attempting to post data to a JSON server using the POST method. Unfortunately, I am encountering errors. My application has buttons for actions such as follow and like. When a user clicks on the follow button, the number shou ...

javascriptangulartypescriptangular6

Obtain the distinct highest value for every vertical axis on a bar graph

I'm facing an issue with my code where I am appending multiple SVG elements and generating 3 different charts. The problem is that the maximum value evaluated from the y.domain() for each y-axis is taken as the maximum value from all of my data. Is t ...

javascriptd3.js

Unexpected token { received in VM92:1 after making an AJAX request to PHP data

Seeking guidance on why I am encountering an unexpected token "}" from my ajax call. I've carefully reviewed for any extraneous characters in my errors, but have come up empty-handed. My JSON does not validate online, which is puzzling as I did not ma ...

javascriptphpjqueryajax

A step-by-step guide for beginners on moving and removing push pins in Ajax Bing Maps version 7

I am currently exploring the world of maps. I am now looking to develop a method that will update my push pin if there is already one present. Firstly, I attempted to use setLocation(newLocation) but unfortunately, it seems like my client side code wasn&a ...

javascriptbing-maps

What is the reason for the failure of this code to store data in local storage (undefined)?

After creating a new div with data from an input form, I noticed that the first div properly saves the inputted data. However, when I try to input new data, the div displays an undefined value. first attempt second attempt 0: {name: "Milk", amount: "30"} ...

javascripthtmljsondom

Customized loading screens in Vue.js based on user roles

I have set the user type in all my components but now I want to implement validation for it in my routes. However, I am unsure of how to do so. Code In my route.js file, I have defined the routes that require authentication in the meta section. import V ...

laravelvue.jsvuejs2vue-router

Insert a new element into a JSON object

I am dealing with a JSON object that has the following structure: [{"field1":1,"field2":"A","field3":"B"}, {"field1":2,"field2":"B","field3":"C"}, {......}, {......}, ] My goal is to add a new attribute to each row based on certain calculations. The des ...

javascriptjqueryjson

Tips for adapting the position of a floating div according to its height and environment

Important Note: The code below utilizes the rubuxa plugin for handling JS sortables. Javascript: function querySelector(expr){return document.querySelector(expr)} var container = querySelector('.ITEST'); var sortable = Sortable.create(container, ...

javascriptcss

Ways to pass data to a different module component by utilizing BehaviourSubject

In multiple projects, I have used a particular approach to pass data from one component to another. However, in my current project, I am facing an issue with passing data from a parent component (in AppModule) to a sidebar component (in CoreModule) upon dr ...

javascriptangulartypescriptrxjsobservable

Tips for sending a prop to a parent component in Vue.js

Currently, I'm working on a Vue-Tac-Toe application just for fun but I've hit a bit of a roadblock. Please take a look at the screenshot for better context. https://i.sstatic.net/AZtvH.jpg The Issue: How can I pass the prop cellRow to the compo ...

javascriptvue.jstic-tac-toe

Save documents in Firebase storage

Currently in the process of developing a web application using Firebase and Angularjs as my frontend tools. Curious to know whether it's feasible to store various file types within the Firebase DB. Could you shed some light on any potential limitatio ...

javascriptangularjsfirebase

Creating PDFs with Rotativa that feature C3JS charts in an Asp.net environment

Currently, I am working on incorporating dashboard stats into one of my projects. I have successfully added charts to the dashboard using C3js, and everything is working perfectly. However, I encountered an issue when attempting to generate a PDF of this ...

javascriptc#asp.netpdfc3.js

Elegant routing using total.js (such as 'basepath/@username')

After working with Ruby and RoR, I'm diving into node.js for the first time. I want to create a user view in total.js with clean routing similar to how it's done in Rails. In Rails, I would use code like this: get '@:username' => ...

javascripttotal.js

Switching ng-Idle countdown time from seconds to minutes is possible by adjusting the configuration settings

I have implemented ng-idle in my application, where the warning popup appears after 10 seconds with the message: "Your session will be close in 10 seconds" However, I need to change this to minutes. The session should be closed in 5 minutes instead. How ...

javascripthtmlcssangularjs

Is it possible to insert a JavaScript module into a webpage using a Firefox web extension?

When attempting to load a script in my extension's content script, I encounter an issue: let s = document.createElement("script"); s.setAttribute("async", ""); s.setAttribute("type", "module"); s.setAt ...

javascriptfirefox-addonfirefox-addon-webextensions

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

Exploring ways to retrieve specific data from an array in a stacked bar graph tooltip using D3.js version 5

I am working with a JSON file below where I am summing up values in different fields and trying to display the total amount on a tooltip. Each 'rect' has a total field amount as well as group amounts displayed when hovered over. [ { &qu ...

javascriptarraysjsond3.js

Implementing JavaScript to display specific content when a list is devoid of any items

Currently, I am in the process of developing a basic contact list web application where the contacts are listed within li elements. My aim is to adjust the visibility of the text in the p#no-contacts element based on whether the containing ul has any child ...

javascript

Tips for concealing information that is scrolled beneath a translucent layer

In the scenario where you have two overlapping divs, with the top one being transparent, the goal is to have the bottom div hide as it goes under the top transparent div when scrolling. It's important that the bottom div's visibility is not compl ...

javascriptjqueryhtmlcss

My goal is to send distinct entries for each user that accesses the system from a MySQL database

As a beginner, I need help figuring out how to send each logged-in user a list of unique records from the database. I want to ensure that no duplicate records are sent to different users. How can I achieve this? Below is the code snippet responsible for ...

javascriptmysqlnode.jsexpresssequelize.js