Ranked beginner quiz program

Question

I have been trying to learn JavaScript for the past few days and decided it was time to put what I had learnt into practice. Here is the program I created. It's a five-question quiz which counts the number of correct questions as you go through the quiz and also ranks you at the end of the program.

//I am going to place a variable here to make initialise the number of correct values at 0
var correct = 0;

// ask questions prompts
var answer1 = prompt("Name a Programming language thats also a gem");
if ( answer1.toUpperCase() === 'RUBY') {
  correct += 1;
}
var answer2 = prompt("Name a Programming language thats also a snake");
if ( answer2.toUpperCase() === 'PYTHON') {
  correct += 1;
}
var answer3 = prompt("What language do we use to style webpages?");
if ( answer3.toUpperCase() === 'CSS' || answer3.toUpperCase() === 'CASCADING STYLE SHEETS') {
  correct += 1;
}
var answer4 = prompt("What language do you use to build the structure of a web page?");
if ( answer4.toUpperCase() === 'HTML' || answer4.toUpperCase() === 'HYPER TEXT MARKUP LANGUAGE') {
  correct += 1;
}
var answer5 = prompt("What core language do you use to add interactivity to a web page");
if ( answer5.toUpperCase() === 'JAVASCRIPT') {
  correct += 1;
}

// OUTPUT RESULTS
document.write("<p>You got " + correct + " out of 5 questions correct.</p>");

//output rank

if ( correct === 5 ) {
  document.write("<p><strong>You earned a gold crown!</strong></p>");
} else if ( correct >= 3) {
  document.write("<p><strong>You earned a silver crown.</strong></p>");
} else if ( correct >= 1) {
  document.write("<p><strong>You earned a bronze crown.</strong></p>");
} else {
  document.write("<p><strong>Sorry, no crown for you. Go home and study.   n </strong></p>");
}

Have I coded the program with what is considered best practices, and if not, what could I do to improve it?

Answer 1

See https://github.com/coolaj86/knuth-shuffle for a shuffle function.

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

And write something like:

var correct = 0, answer = new Array();
var myQuestions = [ // my delimiter is ::, use any delimiter you like 
  "Name a Programming language thats also a gem::ruby",
  "Name a Programming language thats also a snake::python",
  "What language do we use to style webpages?::css",
  "What language do you use to build the structure of a web page?::html",
  "What core language do you use to add interactivity to a web page?::javascript"
]
shuffle(myQuestions);

for(i = 0; i < myQuestions.length; i++) {
  answer[i] = prompt(myQuestions[i].substring(0,myQuestions[i].indexOf("::")));
  if(answer[i].toUpperCase() == myQuestions[i].substring(myQuestions[i].indexOf("::")+2).toUpperCase()) { // +2 because string is 2 characters and array starts at 0
    correct++;
  }
}

And so on …

I always say to minimize absolute code (never use it if it's possible). In this way, your code is more flexible leaving room for additions and improvements (you can improve on this code to include multiple answers as seen in your original code).