DRAG QUIZ

PHILIP WISNER

Made with      by Philip Wisner

IDEA

I

TRIVIA

+

+

Vanilla

JavaScript

DRAG
QUEENS

Made with      by Philip Wisner

PROTOTYPE DESIGN

Made with      by Philip Wisner

TECHNOLOGY

Made with      by Philip Wisner

<!--NAME THAT QUEEN QUESTION CARD-->
  <div class="card name-queen-question hidden">
    <h1>Name that Queen</h1>
    <h3>Question <span>1</span></h3>
    <p class="score-float"><b class="bold">SCORE</b> <span>0</span>pts</p>    	
    <p class="question"><img src="http://via.placeholder.com/300x150" alt="" class="responsive-img"><span></span></p>
    <p class="timer"><b class="bold">TIMER</b> <span></span></p>
    <ul class="lives-count">
       <li id="lives-text"><b class="bold">LIVES</b></li>
       <li>
         <span><i class="material-icons">favorite</i></span>
	 <span><i class="material-icons">favorite</i></span>
	 <span><i class="material-icons">favorite</i></span>
       </li>
    </ul>
    <div class="row answers">
      <div class="col s12 m12 l6 xl6">
	<p>OPTION 1</p>
	<p>OPTION 2</p>
      </div>
      <div class="col s12 m12 l6 xl6">
	<p>OPTION 3</p>
	<p>OPTION $</p>
      </div>
    </div>
  </div>

$(document).ready(function () {
	//Controls the DOM to only allow current card to be shown
	$('.enter').on('click', function () {
		$('.welcome').addClass('hidden');
		$('.instructions').removeClass('hidden');
	});
	$('#instructions-next').on('click', function () {
		$('.instructions').addClass('hidden');
		$('.category').removeClass('hidden');
	});
	$('#btn-queen-lingo').on('click', function () {
		$('.category').addClass('hidden');
		$('.queen-lingo').removeClass('hidden');
	});
	$('#btn-name-queen').on('click', function () {
		$('.category').addClass('hidden');
		$('.name-queen').removeClass('hidden');
	});
	$('#btn-who-said').on('click', function () {
		$('.category').addClass('hidden');
		$('.who-said').removeClass('hidden');
	});
	$('#btn-herstory').on('click', function () {
		$('.category').addClass('hidden');
		$('.herstory').removeClass('hidden');
	});
	$('#btn-drag-transform').on('click', function () {
		$('.category').addClass('hidden');
		$('.drag-transform').removeClass('hidden');
	});
	$('#btn-mix-all').on('click', function () {
		$('.category').addClass('hidden');
		$('.mix-all').removeClass('hidden');
	});

@import "responsive-font-size";
@import "variables";
@import "intro-cards";
@import "result-cards";
@import "queen-lingo";
@import "name-queen";
@import "who-said";
@import "herstory";
@import "drag-transform";
@import "mix-all";

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
}

h1 {
	text-align: center;
	margin: 0 auto;
	width: 100%;
	padding: 10px 0 30px 0;
	text-transform: uppercase;
	font-family: 'Roboto', sans-serif;
	@include responsive-font-size (1.5em, 5.5em, 640px, 1200px, 0.3em);
	font-weight: $bolder-text-weight;
	color: $heading-color;
}

MATERIALIZE CSS

Made with      by Philip Wisner

SO MUCH...

Made with      by Philip Wisner

ARE YOU COMMITTED?

Made with      by Philip Wisner

GAME FEATURES

Made with      by Philip Wisner

Clean Responsive Design

Changing Timer

Score Based off Time

5 Lives

Random Question Order

PROBLEMS ENCOUNTERED

Made with      by Philip Wisner

askedQuestions[i++]

var askedQuestions = [];
var inProcess = true;
var i = 0;

function randomOrder() {
while(inProcess){
	var randomQuiz = Math.floor(Math.random() * queenLingo.length);
	var isDone = false;

	for (var i = 0; i < askedQuestions.length; i++) {
		if (askedQuestions[i] === randomQuiz)
			isDone = true;
	} if (!isDone) {
		askedQuestions.push(randomQuiz);
	} if (queenLingo.length == askedQuestions.length)
		inProcess = false;
	}
}

queenLingo[askedQuestions[i]].question

DREAM BIG...BUT NOT TOO BIG

Made with      by Philip Wisner

Underestimated how long it can take to squash a bug

FUTURE

Made with      by Philip Wisner

Randomize the Order of the Answers

Finish the other 4 Categories

Create Mix All Decks Option

Add Timer Animation

Clean up & Restructure my Code

Optimize for Mobile

PLAY

Made with      by Philip Wisner

THE END

THE END

Made with      by Philip Wisner