Member Avatar for braska

I have 2 existing arrays and one calls upon the other for a game from the <form>, as you make a choice in the drop down menu (based on the description displayed), you are right or wrong and it displays the right answer for you if you're wrong... I need a third array that is going to call the images associated with the right answers and display that image of the right answer if they are right or wrong. I don't know how to call the images in the array, or in the form. I'm noob beyond, yes.

  • 3 Contributors
  • 2 Replies
  • 130 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by dr4g

Dani AI

Generated

A simple, reliable pattern is to keep each question's data together: description, the correct-answer index, and the right-answer image URL. That avoids three separate arrays getting out of sync. Assuming this is a browser JavaScript app (tags include javascript), the example below shows the idea: an array of objects for questions, a select drop-down, and a button that always displays the correct answer image (whether the user was right or wrong). This builds on 's point about using logic to pick images and answers, and answers 's request for code/language by showing a plain JS approach.

<form id="quizForm">
  <select id="choice">
    <option value="">Choose...</option>
    <option value="0">Choice A</option>
    <option value="1">Choice B</option>
  </select>
  <button id="check">Check</button>
</form>

<img id="answerImage" alt="" style="display:none;max-width:300px" />

<script>
// data: keep image with the question so indexes stay linked
const questions = [
  { desc: 'Q1', options: ['A','B'], correct: 1, image: 'images/q1-right.jpg' }
];

const select = document.getElementById('choice');
const img = document.getElementById('answerImage');

document.getElementById('check').addEventListener('click', function(e){
  e.preventDefault();
  const sel = select.value;
  if (!sel) return;
  const q = questions[0]; // swap for current question index
  img.src = q.image;                 // always show the right-answer image
  img.alt = 'Correct answer for: ' + q.desc;
  img.style.display = 'block';
});

// preload and error fallback
questions.forEach(q => { new Image().src = q.image; });
img.onerror = () => { img.src = 'images/placeholder.png'; img.alt = 'Image not found'; };
</script>

Notes: keep option value tied to the option index or use data- attributes (option.dataset.img) if you prefer storing the image on the option. Verify image paths (relative to the page), set explicit width/height or CSS to avoid layout shifts, and preload images to prevent flicker. If the app grows, render the select from the questions array so the UI and data stay in sync.

Recommended Answers

All 2 Replies

Member Avatar for azzu5

use if else conditions to do this..! if tru then load true image or if false then load false image...

I hope this will help you..

Member Avatar for dr4g

IF you can post your existing code. we can help modify this with an additional dimension for storing the image information.
Which language is this in ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.