How to iterate through an array of questions and store in an array of user input?

Question

I'm having a problem trying to iterate through an array of questions properly when I try to write them to the document. The first block of code I have included below is essentially what I'm trying to achieve except I'd like to it without prompts. I created an array called question[] that stores 3 question strings right now. The for loop with prompt(question[i]) takes each question in question[] and prompts the user to answer it. It then pushes that value to another array I made called character[].

I've tried a couple different methods to get this done using the .append method, but to no avail unfortunately and I think I can pinpoint my pitfalls to a few different areas.
In the the last blocks of code, I attempted to append the questions from question[] onto the page, and to then have the document listen for the input value to be changed, or for the Enter (key 13) to be pressed. Also, let it be known that I have wrapped all of this in the following function:
$(document).ready(function(){...}

var question = [
    '<br> What is your name?',
    '<br> Are you man or woman?',
    '<br> What is your class?'
];   
var character = [];

//For Loop Using prompt()
for (i = 0; i < question.length; i++) {
     var input = prompt(question[i]);
     character.push(input);
     alert(character[i]);
}

//For Loop Attempting to Use HTML '<input>'
<input id="user-input" placeholder="Type Here"></input>

for (i = 0; i < question.length; i++) {
    $('#game-text').append(question[i]);
    $('#user-input').onchange = function() {
        var userInput = input.value;
        character.push(userInput);
    }
}

OR

for (i = 0; i < question.length; i++) {
    $('#game-text').append(question[i]);
    $(document).keypress(function(key){
    if(key.which === 13 && $('#user-input').is(':focus')) {
        var input = $('#user-input').val();
        character.push(input);
    }
})

Instead of getting the loop displaying one question at a time, I'll have the loop display all questions at once and I can't seem to get it take in user input either.
I'm really not sure how to approach or what exactly the knowledge I'm missing is as I can't seem to find an answer to this online.

Again, to summarize my question is this:
How can I ask a question from an array on the page itself, have the page wait for a response, store that response in another array then do that again until I've gone through the entire array?
Thank you so much for your time! I would very much appreciate the help!

Shidersz · Accepted Answer · 2019-01-12 04:39:08Z

1

You could use a recursive approach, wrapping the logic to ask a question inside a function, and when this process is done, then call again this function with the next question. Please, note I have removed the alert dialogs and replaced they by the console.log() at the end of all the process just to clean the logic a bit.

var question = [
    '<br> What is your name?',
    '<br> Are you man or woman?',
    '<br> What is your class?'
];
var character = [];

const askQuestion = (idx) =>
{
    if (idx >= question.length)
    {
        console.log(character);
        return;
    }

    character.push(prompt(question[idx]));
    askQuestion(idx + 1);
}

askQuestion(0);

edited Jan 12, 2019 at 4:39

answered Jan 12, 2019 at 4:33

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bryan Valencia Over a year ago

Hi @Shidersz! Thank you for your response. I'm not sure exactly what all the rules of etiquette are on this website as I am pretty new here but I hope you don't find it rude if I come back to review your answer more closely tomorrow as I'm about to fall asleep!

Shidersz Over a year ago

Go sleep in peace, you can review the answer when you have the time, there is no rule for that.

Gaurav Bhatt · Accepted Answer · 2019-01-12 05:51:53Z

Since you want to get the questionnaire on the page itself (without prompts), you can use jQuery events to control the flash of questions on the main page and also record the answers sequentially in an array. Here's what you can do:

var question = [
  'What is your name?',
  'Are you man or woman?',
  'What is your class?'
];
var i = 0;
var ans = [];

$(document).ready(function() {
  $("#ques").html(question[i]);
});

$("#answer").click(function() {
  ans.push($("#ans").val());
  $("#ans").val("");
  i++;
  $("#ques").html(question[i]);
  $("#answered").html(JSON.stringify(ans));
  if (i == question.length) {
    $("#ans").hide();
    $("#answer").hide();
    $("#ques").html("You've answered all the questions!");
  }
});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>

  <body>
    <div id="ques"></div>
    <input type="text" id="ans" placeholder="Your Answer">
    <button id="answer">Answer</button>
    <pre id="answered"></pre>
    <script src="script.js"></script>
  </body>
</html>

Collectives™ on Stack Overflow

How to iterate through an array of questions and store in an array of user input?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related