Modifying several classes across different elements within a Svelte component

Question

Modifying several classes across different elements within a Svelte component

I developed a simple quiz application in which the user selects an answer and then clicks the 'check' button. If the selected answer is correct, it will be highlighted in green while incorrect answers are highlighted in red. Conversely, if the wrong answer is chosen, the selected option turns red while the correct answer is highlighted in green.

Currently, my code displays all answers as either green (if correct) or red (if incorrect). How can I modify it to achieve the desired result described above?

<script>
  let questionIndex = 0
  let selectedAnswer
  let correct
  let incorrect

  const quiz = [
    {
      question: 'What is the capital of France?',
      correct_answer: 'Paris',
      answers: ['Berlin', 'London', 'Madrid', 'Paris'],
    }
  ]

  const currentQuestion = quiz[questionIndex]
  const correctAnswer = currentQuestion.correct_answer

  const checkAnswer = () => {

    if (selectedAnswer  == correctAnswer) {
      correct = true
    }
        else {
            incorrect = true
        }

    }

</script>

<style>

  .correct {
    background-color: aquamarine;
  }

  .incorrect {
    background-color: red;
  }

</style>

<main>
  <h3>{quiz[questionIndex].question}</h3>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[0]} />
            {quiz[questionIndex].answers[0]}
        </label>
    
    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[1]} />
            {quiz[questionIndex].answers[1]}
      </label>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[2]} />
            {quiz[questionIndex].answers[2]}
      </label>

    <label class:correct class:incorrect>
                <input
                type="radio"
                bind:group={selectedAnswer}
                value={quiz[questionIndex].answers[3]} />
            {quiz[questionIndex].answers[3]}
      </label>

  <button on:click={checkAnswer}>Check</button>

</main>

javascript svelte

Answer 1

Answer №1

Your approach seems to be redundant, consider implementing a loop to streamline the process.

Now, for each individual item, we are aiming for the following outcomes:

Add a correct class if the button has been clicked and the item is the correct answer.
Add an incorrect class if the button has been clicked and either (a) the answer is correct but the item is not the right answer, or (b) the answer is incorrect but the item is selected as the answer.

This translates into the following conditions for the classes:

answered && value === correctAnswer

For the incorrect class, here's the more complex condition (though I must say, your requirements are a bit convoluted which adds to the code complexity):

answered && (
  (correct && value !== correctAnswer) 
  || (!correct && value === selectedAnswer)
)

In terms of code implementation, it would look something like this:

<script>
  const questionIndex = 0

  let selectedAnswer
  let answered = false

  const quiz = [
    {
      question: 'What is the capital of France?',
      correct_answer: 'Paris',
      answers: ['Berlin', 'London', 'Madrid', 'Paris'],
    },
  ]

  // make this reactive!
  $: currentQuestion = quiz[questionIndex]
  $: correctAnswer = currentQuestion.correct_answer

  $: correct = selectedAnswer === correctAnswer

  const checkAnswer = () => {
    answered = true
  }

  const reset = () => {
    answered = false
  }
</script>

<main>
  <h3>{quiz[questionIndex].question}</h3>

  {#each quiz[questionIndex].answers as value}
    <label
      class:correct={answered && value === correctAnswer}
      class:incorrect={answered && ((correct && value !== correctAnswer) || (!correct && value === selectedAnswer))}>
      <input type="radio" bind:group={selectedAnswer} {value} />
      {value}
    </label>
  {/each}

  <button on:click={checkAnswer}>Check</button>
  <button on:click={reset}>Reset</button>

</main>

<style>
  .correct {
    background-color: aquamarine;
  }
  .incorrect {
    background-color: red;
  }
</style>

Answer 2

Your approach seems to be redundant, consider implementing a loop to streamline the process.

Now, for each individual item, we are aiming for the following outcomes:

Add a correct class if the button has been clicked and the item is the correct answer.
Add an incorrect class if the button has been clicked and either (a) the answer is correct but the item is not the right answer, or (b) the answer is incorrect but the item is selected as the answer.

This translates into the following conditions for the classes:

answered && value === correctAnswer

For the incorrect class, here's the more complex condition (though I must say, your requirements are a bit convoluted which adds to the code complexity):

answered && (
  (correct && value !== correctAnswer) 
  || (!correct && value === selectedAnswer)
)

In terms of code implementation, it would look something like this:

<script>
  const questionIndex = 0

  let selectedAnswer
  let answered = false

  const quiz = [
    {
      question: 'What is the capital of France?',
      correct_answer: 'Paris',
      answers: ['Berlin', 'London', 'Madrid', 'Paris'],
    },
  ]

  // make this reactive!
  $: currentQuestion = quiz[questionIndex]
  $: correctAnswer = currentQuestion.correct_answer

  $: correct = selectedAnswer === correctAnswer

  const checkAnswer = () => {
    answered = true
  }

  const reset = () => {
    answered = false
  }
</script>

<main>
  <h3>{quiz[questionIndex].question}</h3>

  {#each quiz[questionIndex].answers as value}
    <label
      class:correct={answered && value === correctAnswer}
      class:incorrect={answered && ((correct && value !== correctAnswer) || (!correct && value === selectedAnswer))}>
      <input type="radio" bind:group={selectedAnswer} {value} />
      {value}
    </label>
  {/each}

  <button on:click={checkAnswer}>Check</button>
  <button on:click={reset}>Reset</button>

</main>

<style>
  .correct {
    background-color: aquamarine;
  }
  .incorrect {
    background-color: red;
  }
</style>

Modifying several classes across different elements within a Svelte component

Answer №1

Similar questions

Transferring a Query between Domains with the Help of JavaScript

What is the best way to transfer a JSX element from a child component to its parent component?

Connect a nearby dependency to your project if it has the same name as an npm repository

Can you guide me on implementing AWS SDK interfaces in TypeScript?

How can I design a form that resembles the sign-in form used by Google?

Using JavaScript variables within the value section of a JSON is a common requirement for developers

The function Promise.all typically yields an array with nested arrays

Finding a solution to the type issue of error handling in Route Handler with NextJS

Understanding the extent of variables in Javascript

Passing PHP loop values to JavaScript

Transforming React Redux reducer to hooks for a more modern approach

Injecting a full browser-screen DIV into the body of the webpage

What is the best way to input information into my Google spreadsheet with React JS?

What is the proper method for initiating an ajax request from an EmberJs component?

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

Using AREA Coordinates to create a custom Image Map with Image-Based Rollovers, incorporating jQuery for enhanced functionality if desired

Is there an npm module available that can automate a daily task at a specified time in a Node.js environment?

When access to Ajax .responseText in an alert it can be displayed, however it cannot be stored in a variable or

Issues with image uploads in Node.js database storage

My array contains a list, and I need to determine how to ensure that a specific element is displayed first based on a condition in the mapping