Merge branch 'release/0.10.3'

coggen · Apr 15, 2024 · a5afa0f · a5afa0f
2 parents a8f3b40 + 5b77329
commit a5afa0f
Show file tree

Hide file tree

Showing 53 changed files with 1,717 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@sharpen-com/kezuri",
   "description": "The Sharpen Design System",
   "license": "MIT",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -142,6 +142,7 @@ export namespace Components {
         "background": string;
         "brandHref": string;
         "linkHref": string;
+        "linkIcon": string;
         "linkText": string;
     }
     interface SharpenStoryHeader {
@@ -482,6 +483,7 @@ declare namespace LocalJSX {
         "background"?: string;
         "brandHref"?: string;
         "linkHref"?: string;
+        "linkIcon"?: string;
         "linkText"?: string;
     }
     interface SharpenStoryHeader {

diff --git a/src/components/sharpen-simple-navigation/sharpen-simple-navigation.scss b/src/components/sharpen-simple-navigation/sharpen-simple-navigation.scss
@@ -19,6 +19,11 @@ sharpen-simple-navigation {
   }
 
   .navbar .brand img { height: 31px; vertical-align: -6px;  }
+  .navbar .sharpen-icon {
+    font-size: 40px;
+    margin-top: -25px;
+    margin-bottom: -10px;
+  }
 
   &[background="sunrise"] .navbar {
     background-color: var(--color-sunrise);

diff --git a/src/components/sharpen-simple-navigation/sharpen-simple-navigation.tsx b/src/components/sharpen-simple-navigation/sharpen-simple-navigation.tsx
@@ -10,6 +10,7 @@ export class SharpenSimpleNavigation {
   @Prop() brandHref: string;
   @Prop() linkHref: string;
   @Prop() linkText: string;
+  @Prop() linkIcon: string;
 
   render() {
     return (
@@ -34,9 +35,16 @@ export class SharpenSimpleNavigation {
 
   getLink() {
     if (this.linkHref) {
-      return (
-        <a href={this.linkHref}>{this.linkText}</a>
-      )
+      if (this.linkIcon) {
+        return (
+          <a href={this.linkHref} title={this.linkText}><i class="sharpen-icon">{this.linkIcon}</i></a>
+        )
+      } else {
+        return (
+          <a href={this.linkHref}>{this.linkText}</a>
+        )  
+      }
+
     }
   }
 

diff --git a/src/index.html b/src/index.html
@@ -33,6 +33,10 @@ <h1 class="sharpen-heading-2xl">prototypes.sharpen.com</h1>
           </tr>
         </thead>
         <tbody>
+          <tr>
+            <td><a href="one-device/">One-device reading lessons</a></td>
+            <td>Apr 2024</td>
+          </tr>
           <tr>
             <td><a href="storymaker-integration/">Storymaker integrated into the app</a></td>
             <td>Mar 2024</td>

diff --git a/src/prototypes/onboarding-wizard/course_v2.html b/src/prototypes/onboarding-wizard/course_v2.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>Sharpen Prototype: Onboarding</title>
+    <link rel="stylesheet" href="../build/kezuri.css" />
+    <script type="module" src="../build/kezuri.esm.js"></script>
+    <script nomodule src="../build/kezuri.js"></script>
+    <style>
+      .question-content { font-size: var(--font-size-md); }
+      .sharpen-mx-auto { margin-left: auto; margin-right: auto; }
+      hr { margin: 4em 0; color: #eee; }
+
+      svg.featured { width: 4rem; }
+    </style>
+  </head>
+  <body class="sharpen-background--white">
+
+    <div class="sharpen-text--inverse sharpen-text-lg">
+      <div class="sharpen-wizard-container">
+        Jurickson's<br />
+        3-month personalized course
+      </div>
+    </div>
+
+    <div class="sharpen-wizard-container">
+
+      <sharpen-course-description icon="trophy">
+        <li>Start at Sharpen <strong>Level B1</strong></li>
+        <li>Easily read texts at a Grade 1 level by <strong>February 28</strong>.</li>
+        <li>Build increased confidence in reading.</li>
+      </sharpen-course-description>
+
+      <h3 class="sharpen-heading-md sharpen-mt-lg">Course Highlights</h3>
+      <ul class="sharpen-list">
+        <li>Reearch-based curriculum (ESSA Level III Certified)</li>
+        <li>Flexible, parent-led scripted lessons</li>
+        <li>15&ndash;30 minute lessons, 3 practices/week, on your schedule</li>
+        <li>Over 30 interactive digital activities</li>
+        <li>Over 100 hours of learning content</li>
+      </ul>
+
+      <table class="sharpen-table sharpen-table--pricing sharpen-mt-lg">
+        <thead>
+          <tr>
+            <th>Price Today</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>7-day trial</td>
+            <td>$0.00</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table class="sharpen-table sharpen-table--pricing sharpen-mt-md">
+        <thead>
+          <tr>
+            <th>Price After Trial</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              Monthly subscription
+            </td>
+            <td>$24.95</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <sharpen-alert class="sharpen-my-lg" type="success" icon="email">
+        We'll bill you on December 7 unless you cancel before then.
+        You'll receive a reminder email before your trial ends.
+        Cancel your trial anytime.
+      </sharpen-alert>
+
+      <!-- <div class="sharpen-text--center">
+        <div class="sharpen-text-xs sharpen-text--muted sharpen-mb-sm">As featured on</div>
+        <svg class="featured" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 475.70703"><path style="fill:#ccc;" d="M 418.81055 0.009765625 C 374.45589 -0.66021818 335.08984 35.199525 335.08984 87.095703 L 335.08984 320.78711 C 335.13493 329.199 328.85204 336.66016 319.70508 336.66016 L 246.65625 336.66016 C 88.584796 336.8489 102.70963 134.58041 237.25781 134.39062 C 297.07214 134.30572 317.97852 134.39062 317.97852 134.39062 L 317.97852 77.71875 L 234.38867 77.71875 C 182.00938 77.803413 142.35493 97.750166 115.68164 127.48828 C 89.007669 157.22715 75.351785 196.83119 75.373047 236.18945 C 75.393786 274.08004 88.317291 313.40519 115.3125 343.20898 C 142.30771 373.01277 183.35354 393.39453 240.08203 393.39453 L 377.96094 393.39453 C 385.93212 393.39453 392.68945 386.64329 392.68945 378.76953 L 392.68945 93.261719 C 392.6018 78.331542 400.34571 66.328528 412.79688 62.355469 L 412.79883 62.355469 C 424.8772 58.512396 438.14264 63.517617 446.13867 74.890625 L 446.17383 74.941406 L 446.20508 74.994141 C 465.58156 106.7446 513.99802 184.63267 557.73047 254.84375 C 579.59669 289.94928 600.29342 323.13841 615.60742 347.6875 C 623.26445 359.96202 629.57638 370.07682 634.01562 377.19141 C 638.42013 384.25033 640.86758 388.17148 641.14062 388.61523 C 644.36586 393.17301 648.42509 394.88568 651.80664 393.82031 L 651.80859 393.82031 L 651.8125 393.81836 C 653.73095 393.22218 655.2396 391.87078 656.36914 389.64648 C 657.49868 387.42218 658.16797 384.33336 658.16797 380.62305 L 658.16797 93.302734 C 658.12087 78.419981 665.81703 66.391808 678.31055 62.441406 C 690.31466 58.592522 703.62054 63.598128 711.53711 74.982422 L 711.56836 75.027344 L 711.5957 75.074219 C 731.01532 106.80449 779.45293 184.69314 823.19531 254.9043 C 866.91269 325.07533 906.00102 387.67733 906.61328 388.65234 C 906.61528 388.65434 906.61619 388.6562 906.61719 388.6582 C 909.7785 393.18732 914.09461 394.99505 917.69922 393.85938 C 919.65105 393.2421 921.21052 391.86289 922.37305 389.63672 C 923.53557 387.41054 924.23047 384.34346 924.23047 380.66602 L 924.23047 1.7792969 L 924.23047 1.7597656 L 867.05078 1.7597656 L 867.05078 223.01562 C 867.05078 223.01562 831.64295 162.9721 771.28125 59.339844 C 712.22505 -42.183667 600.77557 -0.22228061 600.73047 87.136719 L 600.73047 222.97461 C 600.73047 222.97461 566.17147 162.88811 505.84961 59.255859 C 481.84184 18.028548 449.15847 0.4681756 418.81055 0.009765625 z M 244.71875 1.7597656 C -83.857429 1.7188656 -80.740295 469.83881 249.14453 470.05273 L 378.04297 470.05273 C 433.51504 470.09258 469.1358 437.19218 469.0918 376.55469 L 469.0918 257.98242 C 469.0918 257.98242 541.38504 377.84324 569.75391 424.75977 C 618.01999 504.53319 734.81899 488.84768 734.52539 389.20117 L 734.52539 258.06641 C 734.52539 258.06641 806.8159 377.88278 835.22461 424.86328 C 883.4907 504.61258 1000.2968 488.91086 1000 389.24023 L 1000 1.7597656 L 942.9082 1.7597656 L 942.9082 380.66211 L 942.9082 380.66602 C 942.94809 398.571 932.91132 408.57832 923.34766 411.60156 L 923.3418 411.60352 C 911.67649 415.3222 898.98659 410.34575 891.0957 399.04297 L 891.06836 399.00391 L 891.04297 398.96484 C 889.41108 396.35821 734.68994 148.59328 696.00586 85.292969 C 692.79652 80.735515 688.09505 78.863015 683.92383 80.181641 C 679.59299 81.568971 676.83984 86.153138 676.83984 93.294922 L 676.83984 380.57617 L 676.83984 380.58008 C 676.88518 398.55804 667.01837 408.53599 657.49609 411.60156 L 657.49023 411.60352 L 657.48438 411.60547 C 645.98998 415.2176 633.5017 410.25053 625.66016 398.95703 L 625.64062 398.92969 L 625.62305 398.90234 C 625.31038 398.41633 622.81413 394.42219 618.34961 387.27734 C 613.88508 380.13249 607.55232 369.99209 599.87695 357.69531 C 584.52623 333.10176 563.80824 299.88481 541.93359 264.77148 C 498.20482 194.57777 449.88987 116.85284 430.57422 85.208984 C 427.36851 80.658692 422.62427 78.819481 418.44531 80.142578 L 418.44531 80.140625 C 414.06587 81.530387 411.28617 86.113769 411.32617 93.199219 L 411.32617 93.205078 L 411.32617 378.76758 C 411.32617 397.09519 396.30214 412.02734 377.96094 412.02734 L 240.08008 412.02734 C 177.34693 412.02734 131.41109 389.25492 101.27539 355.85156 C 71.139695 322.4482 56.781181 278.51316 56.738281 236.18945 C 56.695388 192.27465 71.903998 148.07037 101.75586 114.77539 C 131.60772 81.480399 176.14099 59.169094 234.3457 59.083984 L 234.34766 59.083984 L 317.97852 59.083984 L 317.97852 1.7597656 L 244.71875 1.7597656 z" clip-rule="evenodd"></path></svg>
+      </div> -->
+
+      <button class="sharpen-button sharpen-button--full-width sharpen-button--primary sharpen-button--large sharpen-mt-lg">Checkout &rsaquo;</button>
+
+    </div>
+
+  </body>
+</html>
diff --git a/src/prototypes/one-device/activity_flash_card.png b/src/prototypes/one-device/activity_flash_card.png
diff --git a/src/prototypes/one-device/activity_flash_card_2.png b/src/prototypes/one-device/activity_flash_card_2.png
diff --git a/src/prototypes/one-device/activity_sound_game.png b/src/prototypes/one-device/activity_sound_game.png
diff --git a/src/prototypes/one-device/activity_word_puzzle.png b/src/prototypes/one-device/activity_word_puzzle.png
diff --git a/src/prototypes/one-device/audio/flash-cards/correction_for_babka.mp3 b/src/prototypes/one-device/audio/flash-cards/correction_for_babka.mp3
diff --git a/src/prototypes/one-device/audio/flash-cards/correction_for_dont.mp3 b/src/prototypes/one-device/audio/flash-cards/correction_for_dont.mp3
diff --git a/src/prototypes/one-device/audio/flash-cards/here_are_a_few.mp3 b/src/prototypes/one-device/audio/flash-cards/here_are_a_few.mp3
diff --git a/src/prototypes/one-device/audio/flash-cards/that_was_tricky.mp3 b/src/prototypes/one-device/audio/flash-cards/that_was_tricky.mp3
diff --git a/src/prototypes/one-device/audio/flash-cards/thats_right.mp3 b/src/prototypes/one-device/audio/flash-cards/thats_right.mp3
diff --git a/src/prototypes/one-device/audio/flash-cards/what_word.mp3 b/src/prototypes/one-device/audio/flash-cards/what_word.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/i_have_a_sound_game.mp3 b/src/prototypes/one-device/audio/sound-game/i_have_a_sound_game.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/now_say_without.mp3 b/src/prototypes/one-device/audio/sound-game/now_say_without.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/pat_without_p.mp3 b/src/prototypes/one-device/audio/sound-game/pat_without_p.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/read_this_word.mp3 b/src/prototypes/one-device/audio/sound-game/read_this_word.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/thats_right.mp3 b/src/prototypes/one-device/audio/sound-game/thats_right.mp3
diff --git a/src/prototypes/one-device/audio/sound-game/this_word_is_pat.mp3 b/src/prototypes/one-device/audio/sound-game/this_word_is_pat.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/a.mp3 b/src/prototypes/one-device/audio/tap-and-say/a.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/drag_this_letter.mp3 b/src/prototypes/one-device/audio/tap-and-say/drag_this_letter.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/first_sound_in_tap.mp3 b/src/prototypes/one-device/audio/tap-and-say/first_sound_in_tap.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/good_job.mp3 b/src/prototypes/one-device/audio/tap-and-say/good_job.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/here_are_the_letters.mp3 b/src/prototypes/one-device/audio/tap-and-say/here_are_the_letters.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/lets_put_them.mp3 b/src/prototypes/one-device/audio/tap-and-say/lets_put_them.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/now_im_going.mp3 b/src/prototypes/one-device/audio/tap-and-say/now_im_going.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/p.mp3 b/src/prototypes/one-device/audio/tap-and-say/p.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/please_say_tap.mp3 b/src/prototypes/one-device/audio/tap-and-say/please_say_tap.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/point_to_t.mp3 b/src/prototypes/one-device/audio/tap-and-say/point_to_t.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/say_t.mp3 b/src/prototypes/one-device/audio/tap-and-say/say_t.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/t.mp3 b/src/prototypes/one-device/audio/tap-and-say/t.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/this_is_t.mp3 b/src/prototypes/one-device/audio/tap-and-say/this_is_t.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/today_i_have_a_word_puzzle.mp3 b/src/prototypes/one-device/audio/tap-and-say/today_i_have_a_word_puzzle.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/wow.mp3 b/src/prototypes/one-device/audio/tap-and-say/wow.mp3
diff --git a/src/prototypes/one-device/audio/tap-and-say/your_turn_to_tap.mp3 b/src/prototypes/one-device/audio/tap-and-say/your_turn_to_tap.mp3
diff --git a/src/prototypes/one-device/flash-cards.html b/src/prototypes/one-device/flash-cards.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+  <title>Sharpen Prototype: One-Device Reading Lesson</title>
+  <link rel="stylesheet" href="../build/kezuri.css" />
+  <script type="module" src="../build/kezuri.esm.js"></script>
+  <script nomodule src="../build/kezuri.js"></script>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+  <link rel="stylesheet" href="one-device.css" />
+</head>
+<body class="sharpen-lesson">
+
+  <div class="interface">
+    <div class="primary">
+      <section class="instruction">
+        <div class="controls"><button id="repeat" class="sharpen-button sharpen-button--circle sharpen-button--muted disable-on-audio"><i class="sharpen-icon">play_arrow</i></button></div>
+        <div class="text"></div>
+        <div class="brand"><img src="../build/assets/images/brand/sharpen_mark_evergreen.png" alt="Sharpen" /></div>
+      </section>
+      <section class="activity">
+        <img class="hide" src="activity_flash_card.png" />
+      </section>
+      <div class="help-content hide">
+        <p>You are saying a SOUND here, not the letter name.</p>
+        <p>Say the word slowly while dragging your finger under the lines.</p>
+      </div>
+    </div>
+    <nav>
+      <div class="movement">
+
+        <div class="metadata">
+          <div class="lesson">
+            <strong>Lesson B1</strong><br />
+            Activity 2
+          </div>
+          <!-- <button class="lesson-close"><i class="sharpen-icon">close</i></button> -->
+          <a href="index.html" class="lesson-close"><i class="sharpen-icon">close</i></a>
+        </div>
+
+        <button class="sharpen-button sharpen-button--small sharpen-button--primary disable-on-audio"><i class="sharpen-icon">arrow_upward</i></button>
+        <div class="activity-step">
+          Step <span class="step-number">1</span>
+        </div>
+        <!-- <sharpen-progress-circle progress-val="0" progress-label="1"></sharpen-progress-circle> -->
+        <button id="next" class="sharpen-button sharpen-button--small sharpen-button--primary disable-on-audio"><i class="sharpen-icon">arrow_downward</i></button>  
+
+      </div>
+      <div class="actions">
+
+        <button id="correct" class="sharpen-button sharpen-button--small sharpen-button--secondary disable-on-audio" disabled="disabled">Correct</button>
+        <button id="incorrect" class="sharpen-button sharpen-button--small sharpen-button--secondary disable-on-audio" disabled="disabled">Incorrect</button>
+        <!-- <button class="sharpen-button sharpen-button--small sharpen-button--secondary disable-on-audio">Show word</button>
+        <button class="sharpen-button sharpen-button--small sharpen-button--secondary disable-on-audio">Clear writing</button> -->
+
+      </div>
+      <div class="help">
+
+        <button id="help" class="sharpen-button sharpen-button--small sharpen-button--primary disable-on-audio"><i class="sharpen-icon">question_mark</i></button>
+
+      </div>
+    </nav>
+  </div>
+
+
+<audio id="a_1" src="audio/flash-cards/here_are_a_few.mp3"></audio>
+<audio id="a_2" src="audio/flash-cards/what_word.mp3"></audio>
+<audio id="a_3" src="audio/flash-cards/thats_right.mp3"></audio>
+<audio id="a_4" src="audio/flash-cards/that_was_tricky.mp3"></audio>
+<audio id="a_5" src="audio/flash-cards/correction_for_dont.mp3"></audio>
+<audio id="a_6" src="audio/flash-cards/correction_for_babka.mp3"></audio>
+
+<script>
+
+function enableButtons() {
+  $(".disable-on-audio").removeAttr("disabled");
+}
+
+function disableButtons() {
+  $(".disable-on-audio").attr("disabled", "disabled");
+  $(".pulse").removeClass("pulse");
+}
+
+function playStep(step) {
+
+  var totalSteps = 19,
+      $audio1 = $("audio#a_1"),
+      $audio2 = $("audio#a_2"),
+      $audio3 = $("audio#a_3"),
+      $audio4 = $("audio#a_4"),
+      $audio5 = $("audio#a_5"),
+      $audio6 = $("audio#a_6"),
+      $instructionText = $(".instruction .text"),
+      $btnNext = $("#next"),
+      $btnCorrect = $("#correct"),
+      $btnIncorrect = $("#incorrect"),
+      $listenHtml = $('<i class="sharpen-icon">hearing</i> <span class="listen">Listen</span>'),
+      $img = $(".activity img"),
+      $stepNumber = $(".step-number");
+
+  $stepNumber.text(step);
+
+  switch (step) {
+    case 1:
+      disableButtons();
+      $instructionText.html($listenHtml);
+      $audio1[0].play();
+      $audio1.on("ended", function() {
+        $instructionText.html("What word?");
+        $img.removeClass("hide");
+        enableButtons();
+        $btnNext.attr("disabled", "disabled");
+        $audio2[0].play();
+
+        // Correct "don't" response
+        $btnCorrect.addClass("pulse").one("click", function() {
+          $instructionText.html($listenHtml);
+          disableButtons();
+          $audio3[0].play();
+          $audio3.on("ended", function() {
+            $instructionText.html("What word?");
+            $img.removeClass("hide");
+            $img.attr("src", "activity_flash_card_2.png");
+            enableButtons();
+            $btnNext.attr("disabled", "disabled");
+            $audio2[0].play();
+
+            $btnCorrect.addClass("pulse");
+            $btnIncorrect.off("click").addClass("pulse").one("click", function() {
+              disableButtons();
+              $audio4[0].play();
+              $audio4.on("ended", function() {
+                $audio6[0].play();
+                $audio6.on("ended", function() {
+                  enableButtons();
+                  $btnCorrect.attr("disabled", "disabled");
+                  $btnIncorrect.attr("disabled", "disabled");
+                  $btnNext.addClass("pulse");
+                });
+              });
+            });
+          });
+        });
+
+        // Incorrect "don't" response
+        $btnIncorrect.addClass("pulse").one("click", function() {
+          disableButtons();
+          $audio4[0].play();
+          $audio4.on("ended", function() {
+            $audio5[0].play();
+            $audio5.on("ended", function() {
+              enableButtons();
+              $btnCorrect.attr("disabled", "disabled");
+              $btnIncorrect.attr("disabled", "disabled");
+              $btnNext.addClass("pulse");
+            });
+          });
+        });
+      });
+      break;
+  }
+}
+
+$(document).ready(function() {
+
+  var activityStep = 1,
+      $btnNext = $("#next")
+      $btnRepeat = $("#repeat"),
+      $btnHelp = $("#help"),
+      $helpContent = $(".help-content"),
+      $brand = $(".brand img"),
+      brandAnimationClasses = "animate__animated animate__rubberBand";
+
+  // playStep(activityStep);
+
+  $btnNext.on("click", function() {
+    activityStep++;
+    playStep(activityStep);
+
+    $brand.addClass(brandAnimationClasses).one("animationend", () => {
+      $brand.removeClass(brandAnimationClasses);
+    });
+  });
+
+  $btnRepeat.on("click", function() {
+    playStep(activityStep);
+  });
+
+  $btnHelp.on("click", function() {
+    if ($helpContent.hasClass("hide")) {
+      $helpContent.removeClass("hide");
+      $helpContent.addClass("animate__animated animate__faster animate__fadeIn");
+      $btnHelp.html('<i class="sharpen-icon">keyboard_arrow_down</i>');
+    } else {
+      $btnHelp.html('<i class="sharpen-icon">question_mark</i>');
+      $helpContent.removeClass("animate__fadeIn");
+      $helpContent.addClass("animate__fadeOut");
+      $helpContent.one("animationend", function() {
+        $helpContent.addClass("hide");
+        $helpContent.removeClass("animate__animated animate__faster animate__fadeOut");
+      });
+    }
+  });
+
+});
+
+</script>
+
+</body>
+</html>