How can I displaymy question to the console before I accept the user's answer?

Question

Forgive me for the dumb question but I'm a beginner in using Javascript and I'm not sure if it's because of the IDE I'm using(which is Replit) or if there's a different rule in Javascript(as I'm a little bit more familiar with C# and would not be havingt this problem if I were using that).

But, I don't know how to display input to the window before I accept user-input. For example I have the following code that is part of a little game I'm creating where I ask trivia questions.

class Question {
  constructor(t, oA, oB, oC, oD, ans) {
    this.title = t;
    this.optionA = oA;
    this.optionB = oB;
    this.optionC = oC;
    this.optionD = oD
    this.answer = ans;
  }

  displayEntireQuestion() {
    console.log(`${this.title}`);
    console.log(`A.${this.optionA}`);
    console.log(`B.${this.optionB}`);
    console.log(`C.${this.optionC}`);
    console.log(`D.${this.optionD}`);
  }
}

let Round1Questions = [
    new Question("What was the most popular language of 2018?", "PHP", "JavaScript", "Ruby", "Python", "Javascript"),
  new Question("What year did WW2 end in?", "1945",
    "1939", "1978", "1942", "1945")
]

let question1 = Round1Questions[Math.floor(Math.random() * Round1Questions.length)];



question1.displayEntireQuestion();

console.log("Please enter the correct answer");

userAnswer = prompt();

if (userAnswer == question1.answer) {
  console.log("Correct!");
} else {
  console.log("Sorry, wrong answer.");
}

When I run this it automatically goes to the prompt command without displaying the question first. How can I fix this? I feel so dumb for asking this because I'm used to using C# in Visual Studio where the code executes line by line.

edit: Even if I put "Please enter the correct answer" in my prompt method, it still doesn't solve the issue of the question not being displayed first

Run in a browser using Replit, which is what our teacher has given us to use. — Wali H, Mar 01 '19 at 04:17
You are expecting this line: `question1.displayEntireQuestion();` displays the question? In that case, put the code that refers to `displayEntireQuestion()` so we can have an idea of what it does... — Shidersz, Mar 01 '19 at 04:19
Displays a question from an array of questions I've created that are objects. displayEntireQuestion is a method within the class called "Question". I've included the entire code above — Wali H, Mar 01 '19 at 04:24
And did you see the `logs` on the console if you call only `question1.displayEntireQuestion()` and comment the other code? — Shidersz, Mar 01 '19 at 04:31
Where **exactly** are you expecting users to _"see"_ the question? The only place you're displaying anything in particular is in the [developer console](https://developers.google.com/web/tools/chrome-devtools/console/) — Phil, Mar 01 '19 at 04:33
Yes, that's what I mean. When I run my code to test it out, I want the Question to be brought up in the console before the user can enter the answer. But in my code it goes directly to the prompt "Please enter the correct answer" without even displaying the question in the console. — Wali H, Mar 01 '19 at 04:36
The developer console is not visible to the user in a browser. — , Mar 01 '19 at 04:42
Do you reccommend I just install an IDE instead of using a cloud based one? — Wali H, Mar 01 '19 at 04:46
In other words, your question itself has to go in the prompt or into HTML the user can see, and have the prompt come up on button press or somethign else. That is, if I understand your Q correctly. — , Mar 01 '19 at 04:46
The IDE should not have much to do with it? But I don’t know—I use JS specifically as a build tool and in webpages, so if you are doingg something else I cannot help. — , Mar 01 '19 at 04:47

Shidersz · Accepted Answer · 2019-03-01T05:01:38.900

I believe that your problem is that alert() and prompt() pauses (blocks) the execution of the script, and that may be the cause you can't see the logs on the console before the prompt(). You can check it not working (the issue you are mentioning) on the next example:

class Question
{
    constructor(t,oA,oB,oC,oD,ans)
    {
        this.title=t;
        this.optionA=oA;
        this.optionB=oB;
        this.optionC=oC;
        this.optionD=oD
        this.answer=ans;
    }

    displayEntireQuestion()
    {
        console.log(`${this.title}`);
        console.log(`A.${this.optionA}`);
        console.log(`B.${this.optionB}`);
        console.log(`C.${this.optionC}`);
        console.log(`D.${this.optionD}`);
    }
}

let Round1Questions = [];
Round1Questions.push(new Question("What was the most popular language of 2018?","PHP","JavaScript","Ruby", "Python", "Javascript"));
Round1Questions.push(new Question("What year did WW2 end in?", "1945", "1939", "1978", "1942", "1945"));

let question1 = Round1Questions[Math.floor(Math.random()*Round1Questions.length)];
question1.displayEntireQuestion();
let userAnswer = prompt();

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

You can refer to: Why does alert(); run before console.log(); to have more background about this issue. However, a simple fix to this can be implemented using setTimeout():

class Question
{
    constructor(t,oA,oB,oC,oD,ans)
    {
        this.title=t;
        this.optionA=oA;
        this.optionB=oB;
        this.optionC=oC;
        this.optionD=oD
        this.answer=ans;
    }

    displayEntireQuestion()
    {
        console.log(`${this.title}`);
        console.log(`A.${this.optionA}`);
        console.log(`B.${this.optionB}`);
        console.log(`C.${this.optionC}`);
        console.log(`D.${this.optionD}`);
    }
}

let Round1Questions = [];
Round1Questions.push(new Question("What was the most popular language of 2018?","PHP","JavaScript","Ruby", "Python", "Javascript"));
Round1Questions.push(new Question("What year did WW2 end in?", "1945", "1939", "1978", "1942", "1945"));

let question1 = Round1Questions[Math.floor(Math.random()*Round1Questions.length)];
question1.displayEntireQuestion();
let userAnswer = setTimeout(() => prompt());

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

But I suggest to display your question with prompt(), like this:

class Question
{
    constructor(t,oA,oB,oC,oD,ans)
    {
        this.title=t;
        this.optionA=oA;
        this.optionB=oB;
        this.optionC=oC;
        this.optionD=oD
        this.answer=ans;
    }

    displayEntireQuestion()
    {
        return prompt(`${this.title}\nA.${this.optionA}\nB.${this.optionB}\nC.${this.optionC}\nD.${this.optionD}`);
    }
}

let Round1Questions = [];
Round1Questions.push(new Question("What was the most popular language of 2018?","PHP","JavaScript","Ruby", "Python", "Javascript"));
Round1Questions.push(new Question("What year did WW2 end in?", "1945", "1939", "1978", "1942", "1945"));

let question1 = Round1Questions[Math.floor(Math.random()*Round1Questions.length)];
let userAnswer = question1.displayEntireQuestion();
console.log(userAnswer);

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:100% !important; top:0;}

score 1 · Answer 2 · answered Mar 01 '19 at 04:13

The prompt function takes a string input to display - use like so:

var userAnswer = prompt("Please enter the correct answer");
console.log(userAnswer);

If you want to display it separately, use alert then prompt:

alert("Please enter the correct answer");
var userAnswer = prompt();
console.log(userAnswer);

score 1 · Answer 3 · answered Mar 01 '19 at 04:46

UI alerts (like alert, prompt and confirm) block operation of the executing thread (of which there is only one in JavaScript). I'd need to look into the specifics but I suspect the display of console messages isn't instant and probably only happens once-per-event-loop / asynchronously.

Your solution would be to delay the prompt, even by the smallest amount of time possible.

setTimeout(() => {
  let userAnswer = prompt("Please enter the correct answer");

  if (userAnswer == question1.answer) {
    console.log("Correct!");
  } else {
    console.log("Sorry, wrong answer.");
  }
})

Really though, don't use the developer console to display application-critical information. I would also suggest using an event to trigger a prompt().

Yeah, this answer explain the issue the OP was facing +1. – Shidersz Mar 01 '19 at 05:04 — Shidersz, Mar 01 '19 at 05:04

score 0 · Answer 4 · answered Mar 01 '19 at 04:12

0

Why not just pass the string you want to display to the user to the prompt? For example:

userAnswer = prompt("Please enter the correct answer");

answered Mar 01 '19 at 04:12

Snow

3,820
3
13
39

Even when I do that, it doesn't display the question first. – Wali H Mar 01 '19 at 04:13
What do you mean, "display the question"? If you want them to see the `Please enter the correct answer` string, just pass it to the `prompt`, as in the snippet. – Snow Mar 01 '19 at 04:14
I think I might've not addressed the problem correctly in my question. The issue I'm having is that the question does not display before the user has a chance to see it so they can answer. All they see is "Please enter the correct answer" without seeing the question – Wali H Mar 01 '19 at 04:15
But what do you mean, you want them to "see the question"? It sounds as if the code you're asking about is not in the question above – Snow Mar 01 '19 at 04:16
question1.DisplayEntireQuestion(); is supposed to display a randomly selected Question from an array of objects I've created. I didn't include the questions because I didn't feel it was relevent but I did include the method that is called to display a question so you could have an idea what I was talking about. – Wali H Mar 01 '19 at 04:19

How can I displaymy question to the console before I accept the user's answer?

4 Answers4