Skip to content

Instantly share code, notes, and snippets.

@silentworks
Created January 3, 2019 21:34
Show Gist options
  • Save silentworks/bd95e21b97bb643c7f8220ff97dd1c3e to your computer and use it in GitHub Desktop.
Save silentworks/bd95e21b97bb643c7f8220ff97dd1c3e to your computer and use it in GitHub Desktop.
<div class="question-set">
{#if question}
<Question
on:answer="{({ detail }) => checkAnswer(detail.option)}"
on:next="{({ detail }) => onToNext(detail.question)}"
question="{question}"
totalTries="3"
/>
{:else}
<Feedback questions="{questions}" totalPoints="3" />
<button class="question__reset" on:click="{() => reset()}">Play Again</button>
{/if}
{#each questions as question}
<li>{question.title}</li>
{/each}
</div>
<script>
import Question from "./Question.html";
import Feedback from "./Feedback.html";
import { randomQuestion, addTriesToQuestion, addPointToQuestion, resetQuestions } from "../checker.js";
// props
export let question;
export let questions;
// methods
const checkAnswer = (answer) => {
addTriesToQuestion(question);
if (answer === question.answer) {
addPointToQuestion(question);
question = randomQuestion(questions);
}
question = question;
};
const onToNext = (prevQuestion) => {
addPointToQuestion(prevQuestion);
question = randomQuestion(questions);
};
const reset = () => {
questions = resetQuestions(questions);
question = randomQuestion(questions);
};
</script>
<style>
.question-set {
margin-top: 20px;
}
.question__reset {
background-color: #e1f5c4;
border: 5px solid #add86d;
border-radius: 30%/90%;
color: #000;
text-align: center;
text-transform: capitalize;
cursor: pointer;
font-size: 1.5rem;
padding: 10px;
width: 160px;
margin: 40px auto;
display: block;
}
</style>
##################################################
# Syntax Highlighting Assistant #
# #
# Press Ctrl + Space context sensitive #
# help.Press Ctrl + S to save your current #
# definition (web storage) #
##################################################
name = svelte
file_extensions [] = svelte, htmlx;
##################################################
# Styles #
##################################################
styles [] {
.comment : style {
color = #6a737d
ace_scope = comment
textmate_scope = comment
pygments_scope = Comment
}
.comments : style {
color = #6a737d
ace_scope = comment
textmate_scope = comment
pygments_scope = Comment
}
.keywords : style {
color = #d73a49
ace_scope = keyword
textmate_scope = keyword
}
.script : style {
color = #8A0F13
ace_scope = script
textmate_scope = script
}
.tag : style {
color = red
}
.punctuation : style {
color = red_2
ace_scope = punctuation
textmate_scope = punctuation
pygments_scope = Punctuation
}
.text : style {
color = brown
ace_scope = text
textmate_scope = text
pygments_scope = String
}
}
##################################################
# Contexts #
##################################################
contexts [] {
main : context {
: include "tag" ;
: include "comments" ;
: include "keywords" ;
: include "punctuation" ;
: include "mustache" ;
}
keywords : context {
: pattern {
regex \= (import|export|from|if|else|const|let|function)
styles [] = .keywords;
}
}
comments : context {
: pattern {
regex \= (//.*)
styles [] = .comment;
}
: inline_push {
regex \= (/\*)
styles [] = .comments;
default_style = .comments
: pop {
regex \= (.*?\*/)
styles [] = .comments;
}
}
}
punctuation : context {
: inline_push {
regex \= (\")
styles [] = .punctuation;
default_style = .text
: pop {
regex \= (\")
styles [] = .punctuation;
}
}
}
tag : context {
: inline_push {
regex \= ({)\s*([#|/][if|each]|:else|:elseif|#wait|@html)
styles [] = .tag;
default_style = .tag
: pop {
regex \= (\})
styles [] = .tag;
}
}
}
mustache : context {
: inline_push {
regex \= (\{)
styles [] = .tag;
default_style = .tag
: pop {
regex \= (\})
styles [] = .tag;
}
}
}
script : context {
: inline_push {
regex \= (\<)
styles [] = .script;
default_style = .script
: pop {
regex \= (\>)
styles [] = .script;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment