Skip to content

Instantly share code, notes, and snippets.

@shilpavijay

shilpavijay/New Project: super-quiz

Last active February 14, 2018 10:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shilpavijay/d4945b2cd6e49acb3a79ea6b30152b9f to your computer and use it in GitHub Desktop.
Save shilpavijay/d4945b2cd6e49acb3a79ea6b30152b9f to your computer and use it in GitHub Desktop.
Download ZIP
Vue as on 14feb
Raw
New Project: super-quiz
Index.html
----------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Animations</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<div id="app">
</div>
<script src="/dist/build.js"></script>
</body>
</html>
App.vue
--------
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1 class="text-center">The Super Quiz</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<component :is="mode" @answered="answered($event)" @confirmed="mode='app-question'"> </component>
</div>
</div>
</div>
</template>
<script>
import Answer from './components/Answer.vue'
import Question from './components/Question.vue'
export default {
data () {
return {
mode: 'app-question'
}
},
methods: {
answered(isCorrect) {
if (isCorrect) {
this.mode = 'app-answer';
}
else {
this.mode = 'app-question';
alert("Wrong! Try Again")
}
}
},
components: {
appQuestion: Question,
appAnswer: Answer
}
}
</script>
<style lang="scss">
</style>
Answer.vue:
------------
<template>
<div class="alert alert-success text-center">
<h1>That's Correct!</h1>
<hr>
<button class="btn btn-primary" @click="onNextQuestion">Next Question</button>
</div>
</template>
<style>
</style>
<script>
export default{
methods: {
onNextQuestion() {
this.$emit('confirmed');
}
}
}
</script>
Question.vue:
----------------
<template>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">{{ question }}</h3>
</div>
<div class="panel-body">
<div class="col-xs-12 col-sm-6 text-center">
<button class="btn btn-primary btn-lg" style="margin: 10px" @click="onAnswer(btnData[0].correct)">{{ btnData[0].answer }}</button>
</div>
<div class="col-xs-12 col-sm-6 text-center">
<button class="btn btn-primary btn-lg" style="margin: 10px" @click="onAnswer(btnData[1].correct)">{{ btnData[1].answer }}</button>
</div>
<div class="col-xs-12 col-sm-6 text-center">
<button class="btn btn-primary btn-lg" style="margin: 10px" @click="onAnswer(btnData[2].correct)">{{ btnData[2].answer }}</button>
</div>
<div class="col-xs-12 col-sm-6 text-center">
<button class="btn btn-primary btn-lg" style="margin: 10px" @click="onAnswer(btnData[3].correct)">{{ btnData[3].answer }}</button>
</div>
</div>
</div>
</template>
<style>
</style>
<script>
const MODE_ADDITION = 1;
const MODE_SUBTRACTION = 2;
export default{
data() {
return {
question: 'Oops, an error ocurred :/',
btnData: [
{correct: true, answer: 0},
{correct: false, answer: 0},
{correct: false, answer: 0},
{correct: false, answer: 0}
]
};
},
methods: {
generateQuestion() {
const firstNumber = this.generateRandomNumber(1, 100);
const secondNumber = this.generateRandomNumber(1, 100);
const modeNumber = this.generateRandomNumber(1, 2);
let correctAnswer = 0;
switch (modeNumber) {
case MODE_ADDITION:
correctAnswer = firstNumber + secondNumber;
this.question = `What's ${firstNumber} + ${secondNumber}?`;
break;
case MODE_SUBTRACTION:
correctAnswer = firstNumber - secondNumber;
this.question = `What's ${firstNumber} - ${secondNumber}?`;
break;
default:
correctAnswer = 0;
this.question = 'Oops, an Error occurred :/';
}
this.btnData[0].answer = this.generateRandomNumber(correctAnswer - 10, correctAnswer + 10, correctAnswer);
this.btnData[0].correct = false;
this.btnData[1].answer = this.generateRandomNumber(correctAnswer - 10, correctAnswer + 10, correctAnswer);
this.btnData[1].correct = false;
this.btnData[2].answer = this.generateRandomNumber(correctAnswer - 10, correctAnswer + 10, correctAnswer);
this.btnData[2].correct = false;
this.btnData[3].answer = this.generateRandomNumber(correctAnswer - 10, correctAnswer + 10, correctAnswer);
this.btnData[3].correct = false;
const correctButton = this.generateRandomNumber(0, 3);
this.btnData[correctButton].correct = true;
this.btnData[correctButton].answer = correctAnswer;
},
generateRandomNumber(min, max, except) {
const rndNumber = Math.round(Math.random() * (max - min)) + min;
console.log(min, max, rndNumber);
if (rndNumber == except) {
return this.generateRandomNumber(min, max, except);
}
return rndNumber;
},
onAnswer(isCorrect) {
this.$emit('answered', isCorrect);
}
},
created() {
this.generateQuestion();
}
}
</script>
Raw
Vue 14feb
animations PRoject:
--------------------
App.vue:
<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<h1>Animations</h1>
<br/><br/>
<button class="btn btn-primary" @click="show=!show">Show Alert</button>
<br/><br/>
<select class="form-control" v-model="selectAnimation">
<option value="fade">Fade</option>
<option value="slide">Slide</option>
</select>
<transition :name="selectAnimation">
<div class="alert alert-info" v-if="show">Some info goes here</div>
</transition>
<transition
enter-active-class="animated bounce"
leave-active-class="animated wobble"
>
<div class="alert alert-info" v-if="show">Some info goes here</div>
</transition>
<br><br>
<button class="btn btn-primary" @click="load = !load">Load/Remove</button>
<br><br>
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"
@before-leave="beforeLeave"
@leave="leave"
:css="false"
>
<div style="width: 300px; height: 100px; background-color: green;" v-if="load"></div>
</transition>
<button class="btn btn-primary"
@click="selectedComponent == 'app-success-alert' ? selectedComponent = 'app-danger-alert' : selectedComponent = 'app-success-alert' ">Toggle Component</button>
<br><br>
<transition name="fade" mode="out-in">
<component :is="selectedComponent"></component>
</transition>
<button class="btn btn-primary" @click = "addItem">Add Item</button>
<br><br>
<ul class="list-group">
<transition-group name="slide">
<li
class="list-group-item"
v-for="(number,index) in numbers"
@click = "removeItem(index)"
style="cursor: pointer"
:key="number">{{ number }}
</li>
</transition-group>
</ul>
</div>
</div>
</div>
</template>
<script>
import DangerAlert from './DangerAlert.vue';
import SuccessAlert from './SuccessAlert.vue';
export default {
data() {
return {
show: false,
load: false,
selectAnimation: "fade",
elementWidth: 100,
selectedComponent: 'app-success-alert',
numbers: [1, 2, 3, 4, 5]
}
},
methods: {
beforeEnter(el) {
console.log("beforeEnter")
this.elementWidth = 100;
el.style.width = this.elementWidth + 'px'
},
enter(el,done) {
console.log("enter");
let round = 1;
const interval = setInterval(() => {
el.style.width = (this.elementWidth + round * 10) + 'px';
round++;
if(round > 20) {
clearInterval(interval);
done();
}
},20);
},
afterEnter(el) {
console.log("afterEnter")
},
enterCancelled(el) {
console.log("enterCancelled")
},
beforeLeave(el) {
console.log("beforeLeave");
this.elementWidth = 300;
el.style.width = this.elementWidth + 'px';
},
leave(el,done) {
console.log("leave")
let round = 1;
const interval = setInterval(() => {
el.style.width = (this.elementWidth - round * 10) + 'px';
round++;
if(round > 20) {
clearInterval(interval);
done();
}
},20);
},
addItem() {
const pos = Math.floor(Math.random() * this.numbers.length);
this.numbers.splice(pos, 0, this.numbers.length + 1);
},
removeItem(index) {
this.numbers.splice(index,1);
}
},
components: {
appDangerAlert: DangerAlert,
appSuccessAlert: SuccessAlert
}
}
</script>
<style>
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 1s;
}
.fade-leave {
/*opacity: 1;*/
}
.fade-leave-active {
transition: opacity 1s;
opacity: 0;
}
.slide-enter {
/*transform: translateX(-30px);*/
}
.slice-enter-active {
animation: slide-in 1s ease-out forwards;
transition: opacity 0.5s;
}
.slide-leave {
}
.slide-leave-active {
animation: slide-out 1s ease-out forwards;
transition: opacity 1s;
opacity: 0;
position: active;
}
.slide-move {
transition: transform 1s;
}
@keyframes slide-in {
from {
transform: translateY(30px);
}
to {
transform: translateY(0);
}
}
@keyframes slide-out {
from {
transform: translateY(0);
}
to {
transform: translateY(30px);
}
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment