Question 43077 in Html Question posted in
Some basic documentation can be found here.

Randomly assign the list of items using Javascript – Html

In the following code, I want the generate Questions, Options, and Answers based on the list of options. I am successfully able to generate the Questions and Answers along with options. But still, sometimes options are getting repeated also when I am dealing with a large list making my work harder. I want a simple solution by which any large list should give me Questions, Options, and Answers.

Please note:

I want options must be random.

Options must have the answer option on a random position.

Options must be not repeated.

function myFunction() {
var myList=document.getElementById("myList").value;
var lines = myList.split("n");   //split lines

var addQ="";

  var result1 = "";
  var option2="";
  
  lines.map(line => {
      var result = line.split("s320/");
      result1 += '"'+result[1] + 'n';
      
      addQ+='new Question("Choose '+result[1]+' character from below!", ["", "", "", ""], "'+result[1]+'"),'+"n";
  })
  
  var addOption1 = result1.split("n");
  
  for (var i = 0; i < addOption1.length; i++) { 
  addQ=addQ.replace('["", "", "", ""]','["", '+addOption1[0]+'", "", ""]')
.replace('["", "", "", ""]','["", "", "", '+addOption1[1]+'"]')
.replace('["", "", "", ""]','["",'+addOption1[2]+'", "", ""]')
.replace('["", "", "", ""]','["", "", "", '+addOption1[3]+'"]')
.replace('["", "", "", ""]','["","",'+addOption1[4]+'", "",]')
.replace('["", "", "", ""]','["", '+addOption1[5]+'", "", ""]');

addQ=addQ.replace('["", '+addOption1[0]+'", "", ""]','['+addOption1[3]+'", '+addOption1[0]+'", '+addOption1[5]+'", '+addOption1[4]+'"]')
.replace('["", "", "", '+addOption1[1]+'"]','['+addOption1[4]+'", '+addOption1[5]+'", '+addOption1[4]+'", '+addOption1[1]+'"]')
.replace('["",'+addOption1[2]+'", "", ""]','['+addOption1[3]+'",'+addOption1[2]+'", '+addOption1[5]+'", '+addOption1[4]+'"]')
.replace('["", "", "", '+addOption1[3]+'"]','['+addOption1[4]+'", '+addOption1[2]+'", '+addOption1[2]+'", '+addOption1[3]+'"]')
.replace('["","",'+addOption1[4]+'", "",]','['+addOption1[0]+'",'+addOption1[5]+'",'+addOption1[4]+'", '+addOption1[5]+'",]')
.replace('["", '+addOption1[1]+'", "", ""]','['+addOption1[1]+'", '+addOption1[5]+'", '+addOption1[3]+'", '+addOption1[5]+'"]');
}

document.getElementById("result").value= addQ;
}
<!DOCTYPE html>
<html>
<body onload="myFunction()">

<b><label for="fname">List of Options:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="myList" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;">
s320/Apple.jpg
s320/Ball.jpg
s320/Cat.jpg
s320/Doll.jpg
s320/Egg.jpg
s320/Frog.jpg</textarea><br><br>
  
  <b><label for="fname">Questions + Options + Answers:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="result" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;"></textarea>
  </body>
  </html>
Tags:

2

Answers


  1. 0

    I got rid of the complex "replace" methods in the code and updated it to delete the option from the options list when added as option to string, thus ensuring a unique value for each random selection.

    function myFunction() {
  var myList=document.getElementById("myList").value;
  var optionList = myList.split("n");   //split lines

  var addQ="";

  var result1 = "";
  var option2="";
  
  optionList.map(option => {
      var result = option.split("s320/");
      result1 += result[1] + ' ';

  })

  result1=result1.split(' ')
  var filteredResult = result1.filter(function (el) { //eliminate empty elements
                return el!='';
  });
            
  for(var i=0;i<optionList.length;i++){    
       var str="";
       var options=[] //create options array.
       var tempOptionList=[...filteredResult]; //clone filteredResult to a new array.
       var removedOptionCount=tempOptionList.length-4;

       for(var t=0;t<removedOptionCount;t++){ //remove X answers from tempOptionList except the answer to obtain only 4 answers 
           var randIndex=(Math.floor(Math.random() * tempOptionList.length)); //get random number
           
           while(tempOptionList[randIndex] == filteredResult[i]){ // answer at index (i) so we don't want to delete it generate new random index
               randIndex=(Math.floor(Math.random() * tempOptionList.length)); //get random number
           }
           
           tempOptionList.splice(randIndex,1);
       }
       
              
       for(var k=0;k<4;k++){ //fill options list randomly.
          var randIndex=(Math.floor(Math.random() * tempOptionList.length)); //get random number
          var randomOption=tempOptionList[randIndex];
          
          while(options.includes(randomOption)){ //while option list includes random option generate new random option.
              randIndex=(Math.floor(Math.random() * tempOptionList.length)); //get random number
              randomOption=tempOptionList[randIndex];
          }
          
          options.push(randomOption);
       }

       for(var j=0;j<options.length;j++){
       
       str+='"'+options[j]+'"' + (j==3 ?"":",") //check if there are 3 option left don't put comma at the end.
          
       }   
       
      addQ+='new Question("Choose '+filteredResult[i]+' character from below!", ['+str+'], "'+filteredResult[i]+'"),'+"n";  
  }

document.getElementById("result").value= addQ;
}
    <!DOCTYPE html>
<html>
<body onload="myFunction()">

<b><label for="fname">List of Options:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="myList" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;">
s320/986.jpg
s320/973.jpg
s320/965.jpg
s320/963.jpg
s320/960.jpg
s320/958.jpg
s320/941.jpg
s320/924.jpg
s320/915.jpg
s320/905.jpg
s320/902.jpg
s320/898.jpg
s320/897.jpg
s320/889.jpg
s320/874.jpg
s320/871.jpg
s320/858.jpg
s320/854.jpg
s320/850.jpg
s320/848.jpg
s320/837.jpg
s320/831.jpg
s320/822.jpg
s320/814.jpg
s320/803.jpg
s320/759.jpg
s320/758.jpg
s320/757.jpg
s320/746.jpg
s320/742.jpg
s320/741.jpg
s320/733.jpg
s320/732.jpg
s320/731.jpg
s320/728.jpg
s320/725.jpg
s320/724.jpg
s320/708.jpg
s320/702.jpg
s320/698.jpg
s320/683.jpg
s320/675.jpg
s320/674.jpg
s320/663.jpg
s320/639.jpg
s320/636.jpg
s320/603.jpg
s320/601.jpg
s320/571.jpg
s320/569.jpg
s320/547.jpg
s320/545.jpg
s320/512.jpg
s320/472.jpg
s320/468.jpg
s320/465.jpg
s320/460.jpg
s320/442.jpg
s320/430.jpg
s320/424.jpg
s320/421.jpg
s320/415.jpg
s320/388.jpg
s320/360.jpg
s320/355.jpg
s320/324.jpg
s320/315.jpg
s320/313.jpg
s320/308.jpg
s320/283.jpg
s320/274.jpg
s320/273.jpg
s320/267.jpg
s320/266.jpg
s320/249.jpg
s320/239.jpg
s320/229.jpg
s320/215.jpg
s320/195.jpg
s320/194.jpg
s320/181.jpg
s320/165.jpg
s320/160.jpg
s320/157.jpg
s320/137.jpg
s320/111.jpg
s320/106.jpg
s320/102.jpg
s320/96.jpg
s320/84.jpg
s320/79.jpg
s320/73.jpg
s320/47.jpg
s320/42.jpg
s320/32.jpg
s320/30.jpg
s320/28.jpg
s320/21.jpg
s320/12.jpg
s320/7.jpg</textarea><br><br>
  
  <b><label for="fname">Questions + Options + Answers:</label></b><br><br>
  <textarea autocomplete="off" cols="30" id="result" name="message" rows="10" style="border: 3px solid #73AD21; width: 90%;"></textarea>
  </body>
  </html>
    Login or Signup to reply.
  2. 0

    Here’s alternative answer
    https://1389876.playcode.io/ (result) / https://playcode.io/1389876 (code)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search