Cocktail Quiz

• HTML
• Sass (BEM)
• JS
• jQuery

Aug 29, 2016

Introduction

The goal for this project was to create a quiz app for learning how to mix the "25 essential cocktails". In online courses the immediate feedback that can be provided for quizzes is known to lead to improved learning outcomes over static or print homework. For this reason I also wanted to provide feedback to the user on the ingredients selected, and wrote responses for possible cases, e.g. from "too few ingredients and none are the right ones" to "the right number of ingredients and all the right ones" to "no ingredients selected".

Approach

An additional goal for the project was to follow an object-oriented approach where each cocktail is an object containing relevant business logic, e.g. listing its own ingredients, comparing user selected ingredients to the list of its own ingredients, etc. (Snippet 1).

function Cocktail( name, ingredients, recipeURL ) {
  this.name = name;
  this.ingredients = ingredients;
  this.url = recipeURL;
}

Cocktail.prototype.makeIngredList = function makeIngredList( ingredList ) {
  var ingredList = ingredList || [];
  this.ingredients.forEach(function(el) {
    ingredList.push( el.ingredient );
  });
  return ingredList;
};

Cocktail.prototype.getResult = function getResult( userIngred ) {
  var correctIngred = [],
    incorrectIngred = [],
    quizIngred,
    diff;

  quizIngred = this.makeIngredList()

  userIngred.forEach(function(el) {
    if ( $.inArray(el, quizIngred) === -1  ) {
      incorrectIngred.push(el);
    } else {
      correctIngred.push(el);
    }
  });	
    
  diff = userIngred.length - quizIngred.length;
    
  return {
    diff: diff,
    correctGuesses: correctIngred,
    incorrectGuesses: incorrectIngred
  };
};

Also, although it's a fairly simple app, it was still useful to break it into modules, using the revealing module pattern (Snippet 2).

var APP = APP || {};

APP.init = function () {

  var cocktailsInGame = APP.data.cocktails;
  var selectedCocktail;
  
  function publicGetSelectedCocktail() {
    return selectedCocktail;
  }
  
  function publicPickCocktail() {
    //set the selectedCocktail private variable
    //update the mix info
    selectedCocktail = newCocktail( cocktailsInGame )[0];
    $('.quiz__mix-info .cocktail-name').text( selectedCocktail.name );
  }
  
  function publicReset() {
    // clear ingredients in mix info and feedback
    // deactivate all ingredient buttons
    $('.quiz__mix-info .cocktail-ingredients').empty();
    $('.cocktail-feedback').addClass('is-hidden').empty();
    $('.answers button.is-active').removeClass('is-active');
  }
  
  return {
    getSelectedCocktail: publicGetSelectedCocktail,
    pickCocktail: publicPickCocktail,
    reset: publicReset
  };
}();

Next steps

As an exercise,

1. think about how I could also turn the buttons into objects, and whether this would be a useful approach here
2. try refactoring the constructor functions to Kyle Simpson's OLOO pattern.

Addendum

Tone of the immediate feedback messages was inspired by SurveyMonkey's Voice and Tone style guide. Layout wireframe was made in Sketch (Figure 1). Font is "Avenir Next".