Choose a random element from an array and then modify the array

Question

Choose a random element from an array and then modify the array

Can someone please assist me with this task? I am creating an array that corresponds to specific question numbers.

var arrayCharge = [];
for (var i = 2; i <= 45; i++) {
arrayCharge.push(i);
}

I then utilize these numbers to display the respective question, answer, and click. Afterwards, I select a new value from the array using this method:

const randomQ = arrayCharge;
const random = Math.floor(Math.random() * randomQ.length);

This successfully loads a new question, but the array remains unchanged. I attempted the following approach:

var remQ = arrayCharge.indexOf(randomQ[random]);
arrayCharge.splice(remQ,1);

Unfortunately, this did not yield the desired outcome :-(

Thank you in advance for your assistance. Nicolas

Please find below the complete code for better understanding. Apologies for missing it earlier:

<!DOCTYPE HTML>
<!--
    Hyperspace by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<!-- Rest of the code goes here -->

javascript arrays random

Answer 1

Answer №1

Nicolas, here is an example of what the final result should look like:

// This code snippet is from my JavaScript library file
// It generates a random number within a specified range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Define variables that need to be accessed globally
let availableQuestions = [];
let rnd = 0;
let counter = 0;

// Populate the question array with sample data
function createQuestions() {
  availableQuestions.length = 0;
  for (let i = 1; i <= 10; i++) {
    availableQuestions.push({"questionnumber": i, "question": "Text for question " + i});
  }
}

// Select a random question and display it to the user
function getRandomQuestion() {
  let totalQuestions = availableQuestions.length;
  let qnElement = document.getElementById("questionnumber");
  let qElement = document.getElementById("question");
  let sButton = document.getElementById("submit");
  let rButton = document.getElementById("restart");
  
  if (totalQuestions == 0) {
    qnElement.innerHTML = "Finished!";
    qElement.innerHTML = "";
    sButton.style.display = "none";
    rButton.style.display = "inline";
  } else {
    counter++;
    rnd = getRandomNumber(0, totalQuestions - 1);
    let thisQuestion = availableQuestions[rnd];
    qnElement.innerHTML = "Question: " + counter + " (Actual Question Number: " + thisQuestion.questionnumber + ")";
    qElement.innerHTML = thisQuestion.question;
  }
}

// Process the user's answer and remove the question from the array
function submitAnswer() {
  availableQuestions.splice(rnd, 1);
  getRandomQuestion();
}

// Reset everything - for testing purposes only
function restart() {
  let qnElement = document.getElementById("questionnumber");
  let qElement = document.getElementById("question");
  let sButton = document.getElementById("submit");
  let rButton = document.getElementById("restart");
  qnElement.innerHTML = "";
  qElement.innerHTML = "";
  sButton.style.display = "inline";
  rButton.style.display = "none";
  counter = 0;
  createQuestions();
  getRandomQuestion();
}

function setupEnvironment() {
  createQuestions();
  getRandomQuestion();
}

window.onload = setupEnvironment;

<div id="questionnumber"></div>
<hr>
<div id="question"></div>

<button id="submit" onclick="submitAnswer();">Submit</button>
<button id="restart" onclick="restart();" style="display:none;">Restart</button>

I added a counter variable to hide the actual question number from the user, but still display it for demonstration purposes.

Answer 2

Nicolas, here is an example of what the final result should look like:

// This code snippet is from my JavaScript library file
// It generates a random number within a specified range
function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// Define variables that need to be accessed globally
let availableQuestions = [];
let rnd = 0;
let counter = 0;

// Populate the question array with sample data
function createQuestions() {
  availableQuestions.length = 0;
  for (let i = 1; i <= 10; i++) {
    availableQuestions.push({"questionnumber": i, "question": "Text for question " + i});
  }
}

// Select a random question and display it to the user
function getRandomQuestion() {
  let totalQuestions = availableQuestions.length;
  let qnElement = document.getElementById("questionnumber");
  let qElement = document.getElementById("question");
  let sButton = document.getElementById("submit");
  let rButton = document.getElementById("restart");
  
  if (totalQuestions == 0) {
    qnElement.innerHTML = "Finished!";
    qElement.innerHTML = "";
    sButton.style.display = "none";
    rButton.style.display = "inline";
  } else {
    counter++;
    rnd = getRandomNumber(0, totalQuestions - 1);
    let thisQuestion = availableQuestions[rnd];
    qnElement.innerHTML = "Question: " + counter + " (Actual Question Number: " + thisQuestion.questionnumber + ")";
    qElement.innerHTML = thisQuestion.question;
  }
}

// Process the user's answer and remove the question from the array
function submitAnswer() {
  availableQuestions.splice(rnd, 1);
  getRandomQuestion();
}

// Reset everything - for testing purposes only
function restart() {
  let qnElement = document.getElementById("questionnumber");
  let qElement = document.getElementById("question");
  let sButton = document.getElementById("submit");
  let rButton = document.getElementById("restart");
  qnElement.innerHTML = "";
  qElement.innerHTML = "";
  sButton.style.display = "inline";
  rButton.style.display = "none";
  counter = 0;
  createQuestions();
  getRandomQuestion();
}

function setupEnvironment() {
  createQuestions();
  getRandomQuestion();
}

window.onload = setupEnvironment;

<div id="questionnumber"></div>
<hr>
<div id="question"></div>

<button id="submit" onclick="submitAnswer();">Submit</button>
<button id="restart" onclick="restart();" style="display:none;">Restart</button>

I added a counter variable to hide the actual question number from the user, but still display it for demonstration purposes.

Answer 3

Answer №2

Nicolas, here is my suggestion for what you should do:

// Begin by creating an array in any manner that suits your needs
var arrayCharge = [];
for (var i = 2; i <= 45; i++) {
  arrayCharge.push({"questionnumber": i, "question": "Text of question " + i});
}

// Verify the length of the array - it should be 44
console.log(arrayCharge.length);
// Generate a random number based on the array length
var rnd = Math.floor(Math.random() * arrayCharge.length);

// Retrieve the question at the randomly generated index
let thisQuestion = arrayCharge[rnd];
// Ensure that we have a random question
console.log(thisQuestion.questionnumber);
console.log(thisQuestion.question)

// Display the question to the user on the page
// The user answers the question and clicks "Submit"

// Next, remove the question using the SAME index number
arrayCharge.splice(rnd,1);
// Check if the array has decreased in size after removing an entry - it should now be 43
console.log(arrayCharge.length);

Answer 4

Nicolas, here is my suggestion for what you should do:

// Begin by creating an array in any manner that suits your needs
var arrayCharge = [];
for (var i = 2; i <= 45; i++) {
  arrayCharge.push({"questionnumber": i, "question": "Text of question " + i});
}

// Verify the length of the array - it should be 44
console.log(arrayCharge.length);
// Generate a random number based on the array length
var rnd = Math.floor(Math.random() * arrayCharge.length);

// Retrieve the question at the randomly generated index
let thisQuestion = arrayCharge[rnd];
// Ensure that we have a random question
console.log(thisQuestion.questionnumber);
console.log(thisQuestion.question)

// Display the question to the user on the page
// The user answers the question and clicks "Submit"

// Next, remove the question using the SAME index number
arrayCharge.splice(rnd,1);
// Check if the array has decreased in size after removing an entry - it should now be 43
console.log(arrayCharge.length);

Choose a random element from an array and then modify the array

Answer №1

Answer №2

Similar questions

Copying a character array to a row in a table in C programming

Scroll Bar Menu (User-Controlled)

Exploring ways to enhance the appearance of a Sidebar Widget Navigation using JQuery

Verify that all keys of an object are present as values in an array of objects

Incorporating a JavaScript advertisement zone within a PHP function

A method parameter in an MVC controller can be bound to HTML form properties by following these steps

JavaScript issue: Shallow copy does not reflect updates in nested JSON object

How can we modify the elements within an Object tag in HTML? If it is achievable, what is the process?

Changing the size of an image in an HTML5 canvas

One required positional argument is needed in `update_one()`: 'update' is missing

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

Determine whether either of these elements has the mouse hovering over it using jQuery

Foreign key is not being posted when submitting the form using Laravel and Vue

Navigating through parent folder HTML files from child folder HTML files

I encountered the following error: Failed to parse due to the module '@babel/preset-react' being missing

Is there a way to access the origin of an iframe?

Utilizing JQuery's serialize method to transfer form data to an ASP.NET MVC controller without the need to actually submit the form

Tips for efficiently deconstructing JSON arrays, objects, and nested arrays

Encountering 404 errors on dynamic routes following deployment in Next.JS

update embed - new command