×
Projects About + Contact

What Beer Are You Javascript Quiz

An Online quiz coded in HTML, CSS, Javascript and jQuery. Users submit answers based on their personality and the code analyzes their answers, calculates and averages their choices based on those answers.

Tools: HTML, CSS, Javascript, Jquery

Process

High Fidelity Wireframes

Here are my original illustrator files I started with for concepting.

Code Examples
I broke down the process for the quiz animations, creating values, updateing, and calculating based on the answers values ranked by most chosen. Below are Javascript/Jquery code samples that will help visualize those steps.
Animating Screens

                   $(".quizscreen_all").hide();
                   $(".beerscreen").hide();
                   $("#beginquiz ").click(function() {
                   var name = $("#name").val();
                     console.log(name);
                     $("#mainscreen").fadeOut(100);
                     $(".quizscreen_all").fadeIn(300);
                   }); // end begin quiz button
                 
Assigning Buckets

                   var  ipa = 0, wheat = 0, lager = 0, pilsner = 0;

                   var quizHeight = $(".quizscreen_all").height(),
                   		numberofquestions = 4,
                   		answers = [],
                   		submitted = 0;
                 
Updating, Checking, & Ending Progress


                   // start option change function
                   	$(".quizscreen input").change(function(){
                   		console.log("changed");
                   		thisAnswer = $(this).val();
                   		console.log(thisAnswer + "= = this answer");
                   	});
                   // end option change function

                   // start update buckets function (user hits submit button)
                   	$(".submit_container").click(function(){
                   		console.log("submit clicked");
                   		console.log("checked  test");
                   		answers = [];
                   		answers.push(thisAnswer);
                   		console.log(answers);
                   		checkCorrects();

                   		// add to choosen bucket function
                   		submitted++;

                   		// start end of quiz (if buckets total to max)
                   		if(submitted==4){
                   			var finaltotols = [ipa, wheat, lager, pilsner];
                   			console.log(finaltotols);

                   			finaltotols.sort(function(a, b){return b-a});
                   			console.log(finaltotols);
                   			var finalanswer = finaltotols[0];
                   			$(".quizscreen_all").addClass("finished");
                   			console.log(finalanswer);

                   			$("#questions_container").hide(500);

                   			$(".beerscreen_all")
                   			if(finalanswer == ipa){
                   				console.log("you are an ipa");
                   				$("#result_ipa").fadeIn(1000);
                   			}
                   			else if(finalanswer == wheat){
                   				console.log("you are an wheat");
                   				$("#result_wheat").fadeIn(1000);
                   			}
                   			else if(finalanswer == pilsner){
                   				$("#result_pilsner").fadeIn(1000);
                   				console.log("you are an pilsner");
                   			}
                   			else if(finalanswer == lager){
                   				$("#result_lager").fadeIn(1000);
                   				console.log("you are an lager");
                   			}
                   		}
                   			// end if quiz is over

                   			//go to next question
                   			else{
                   				var calculation = -968 * submitted;
                   			$(".quizscreen_all").animate({marginLeft:calculation},500);
                   			}
                   	});
                   // end submit button
                 
Adding To Correct Bucket

                   //most updates final result
                   checkCorrects();
                   //updates checkCorrects, run when user selects new questions answer submit button
                   function checkCorrects(){
                     if((answers == "ipa") || (answers == "2ipa")){
                         ipa++;
                         console.log("added ipa")
                       }
                     else if(answers == "wheat"){
                         wheat++;
                         console.log("added wheat")
                       }
                     else if(answers == "lager"){
                         lager++;
                                 console.log("added lager")
                       }
                     else if(answers == "pilsner"){
                         pilsner++;
                                 console.log("added pilsner")
                       }
                 
Website Flow

Here are my screenshots of the final website going through each step until the result.