example.html

<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>

iro.config

##################################################
#  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;
         }
         
      }
      
      
   }
   
}