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
Made with by Philip Wisner
THE END
THE END
Made with by Philip Wisner
DRAG QUIZ
By Philip Wisner
DRAG QUIZ
- 367