GitBook: [master] 28 pages modified

jlyst · gitbook-bot · commit 2f21d2ac4a9c · 2021-08-27T15:15:06.000Z
diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -17,7 +17,7 @@
   * [9. Visual Enhancement](code-template/template-build-tutorial/9.-visual-enhancement.md)
 * [Managing the Question DB](code-template/managing-the-question-db.md)
 
-## More
+## More <a id="advanced"></a>
 
 * [Code Mod Examples](advanced/code-mod-examples/README.md)
   * [Style Changes with CSS](advanced/code-mod-examples/style-changes-with-css.md)
diff --git a/docs/advanced/code-mod-examples/README.md b/docs/advanced/code-mod-examples/README.md
@@ -2,3 +2,7 @@
 
 **In the menu to the left you can find a list of example code modifications you could make to the trivia game.**
 
+{% embed url="https://www.loom.com/share/3dbe10f3f5964628a035524576821625" %}
+
+\*\*\*\*
+
diff --git a/docs/advanced/code-mod-examples/animation-spinning-block.md b/docs/advanced/code-mod-examples/animation-spinning-block.md
@@ -8,8 +8,7 @@ The function below uses p5.js functions to create a spinning block that you can
 
 **1 - Add the following function to the bottom of your JavaScript.**
 
-{% code-tabs %}
-{% code-tabs-item title="JavaScript" %}
+{% code title="JavaScript" %}
 ```javascript
 function spinningBlock() { 
     background("gray"); 
@@ -18,13 +17,11 @@ function spinningBlock() {
     rect(-26, -26, 52, 52); //place the rectangle
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 **2 - Now you simply need to** _**call**_ **this function when you want it to display in the background.** In the example below, `spinningBlock( )` is called in the `draw( )` function when the trivia game state is "welcome" on line 3. If you want, you can choose to call the function at a different point.
 
-{% code-tabs %}
-{% code-tabs-item title="JavaScript" %}
+{% code title="JavaScript" %}
 ```javascript
 //Loops continously for background effects and animations. (p5.js)
 function draw() {
@@ -35,8 +32,7 @@ function draw() {
   else if (trivia.state == "thankyou") background("orange");
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 {% hint style="info" %}
 The _spinningBlock_ is a simple example of adding an animation to your background, but you can come up with your own animation and call it something different than `spinningBlock( )`.   
diff --git a/docs/advanced/code-mod-examples/display-custom-feedback-text.md b/docs/advanced/code-mod-examples/display-custom-feedback-text.md
@@ -10,8 +10,7 @@ This is an example of how you can provide special feedback for each trivia quest
 
 **2 - Next, you want to use the trivia property  `trivia.currentQuestion.feedback` to place the text in the HTML element having** _**id**_**="feedback".** Notice how this is done in lines 2 and 3 below. Make the same changes within your `onClickedAnswer` function in your JavaScript.
 
-{% code-tabs %}
-{% code-tabs-item title="JavaScript" %}
+{% code title="JavaScript" %}
 ```javascript
 function onClickedAnswer(isCorrect) {
   if (isCorrect) $("#feedback").html(trivia.currentQuestion.feedback).show();
@@ -20,8 +19,7 @@ function onClickedAnswer(isCorrect) {
   setTimeout(trivia.gotoNextQuestion, 3000); //wait 3 secs...next question
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 That's it. Try it out.
 
diff --git a/docs/advanced/code-mod-examples/display-question-count-at-welcome.md b/docs/advanced/code-mod-examples/display-question-count-at-welcome.md
@@ -4,8 +4,7 @@ In this simple mod we will let the player know at the welcome screen how many qu
 
 **1 - Modify your** _**welcome screen**_ **HTML like on line 4 below, where the `id="question-count"` was added.**
 
-{% code-tabs %}
-{% code-tabs-item title="HTML" %}
+{% code title="HTML" %}
 ```markup
 <!-------------- WELCOME SCREEN --------------->
 <div class='screen' id='welcome-screen'>
@@ -14,24 +13,21 @@ In this simple mod we will let the player know at the welcome screen how many qu
     <button class="start-btn">Start</button>
 </div>
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 Now we will insert the `trivia.totalQuestions` value into a sentence to be placed in the element with `id="question-count"`. 
 
 **2- Add the code on line 4 below to the end of your `displayWelcome()` function in your JavaScript.**
 
-{% code-tabs %}
-{% code-tabs-item title="JavaScript" %}
+{% code title="JavaScript" %}
 ```javascript
 function displayWelcome() {
   $(".screen").hide();
   $("#welcome-screen").show();
   $("#question-count").html(`You have ${trivia.totalQuestions} questions waiting for you.`);
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 That's it. Try it out.
 
diff --git a/docs/advanced/trivia-js-library-reference.md b/docs/advanced/trivia-js-library-reference.md
@@ -163,8 +163,8 @@ var trivia = {
 
 Copy the HTML/CSS/JavaScript below to get started immediately. 
 
-{% code-tabs %}
-{% code-tabs-item title="index.html" %}
+{% tabs %}
+{% tab title="index.html" %}
 ```markup
 <!DOCTYPE html>
 <html>
@@ -213,9 +213,9 @@ Copy the HTML/CSS/JavaScript below to get started immediately.
   </body>
 </html>
 ```
-{% endcode-tabs-item %}
+{% endtab %}
 
-{% code-tabs-item title="style.css" %}
+{% tab title="style.css" %}
 ```css
 body {
   margin: 0;
@@ -261,9 +261,9 @@ canvas {
   z-index: -1;
 }
 ```
-{% endcode-tabs-item %}
+{% endtab %}
 
-{% code-tabs-item title="code.js" %}
+{% tab title="code.js" %}
 ```javascript
 //Runs once at the beginning
 function setup() {
@@ -311,6 +311,6 @@ function onClickedStart() {
   displayQuestion();
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endtab %}
+{% endtabs %}
 
diff --git a/docs/code-template/managing-the-question-db.md b/docs/code-template/managing-the-question-db.md
@@ -1,5 +1,7 @@
 # Managing the Question DB
 
+{% embed url="https://www.loom.com/share/585749188d1d4799891d55c5718df244" %}
+
 ## Using Google Sheet as Database \(Recommended\)
 
 1. Login to Google Drive.
diff --git a/docs/code-template/template-build-tutorial/1.-screens-as-containers.md b/docs/code-template/template-build-tutorial/1.-screens-as-containers.md
@@ -6,8 +6,8 @@ Below you see the HTML for the three screen "containers" as `<div>` elements. We
 
 **Copy the HTML code and paste it into a new** _**index.html**_ **file, or use the CodePen version if you are starting with** [**CodePen's HTML**](https://codepen.io/pen/)**.** The browser page preview is not exciting, but it should contain text from all three screens.
 
-{% code-tabs %}
-{% code-tabs-item title="HTML - complete index.html file" %}
+{% tabs %}
+{% tab title="HTML - complete index.html file" %}
 ```markup
 <!DOCTYPE html>
 <html>
@@ -35,14 +35,14 @@ Below you see the HTML for the three screen "containers" as `<div>` elements. We
     <h1>Thank you screen.</h1>
   </div>
   
-  <script src="code.js"></script>
+  <script src="script.js"></script>
 </body>
 
 </html>
 ```
-{% endcode-tabs-item %}
+{% endtab %}
 
-{% code-tabs-item title="HTML - CodePen version with body only" %}
+{% tab title="HTML - CodePen version with body only" %}
 ```markup
 <!-------------- WELCOME SCREEN --------------->
 <div class='screen' id='welcome-screen'>
@@ -59,8 +59,8 @@ Below you see the HTML for the three screen "containers" as `<div>` elements. We
   <h1>Thank you screen.</h1>
 </div>
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endtab %}
+{% endtabs %}
 
 >
 
@@ -84,8 +84,7 @@ Next you will see several styles being applied to screens, since `.screen` affec
 
 **Copy the CSS code below into your** _**style.css**_ **file and notice the change. You will need to scroll down in the live preview to see all the screens now.**
 
-{% code-tabs %}
-{% code-tabs-item title="CSS" %}
+{% code title="CSS" %}
 ```css
 body {
   margin: 0;
@@ -102,8 +101,7 @@ body {
   height: calc(100vh - 30px);
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 ### **Save your Code before the next step!**
 
diff --git a/docs/code-template/template-build-tutorial/2.-welcome-screen.md b/docs/code-template/template-build-tutorial/2.-welcome-screen.md
@@ -6,8 +6,7 @@ Now you will update your welcome screen HTML slightly by adding a `<button>` ele
 
 **Update your welcome screen HTML to match the code below. \(Don't add another welcome screen!\)**
 
-{% code-tabs %}
-{% code-tabs-item title="HTML" %}
+{% code title="HTML" %}
 ```markup
 <!-------------- WELCOME SCREEN --------------->
 <div class='screen' id='welcome-screen'>
@@ -16,15 +15,13 @@ Now you will update your welcome screen HTML slightly by adding a `<button>` ele
     <button class="start-btn">Start</button>
 </div>
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 ### CSS for More Style
 
 **Add the following CSS styles to the bottom of your stylesheet for buttons and headings.** Modify styles as you wish, but be careful about the effects of changing `display`, `margin`, and `width` , which can be problematic sometimes.
 
-{% code-tabs %}
-{% code-tabs-item title="CSS" %}
+{% code title="CSS" %}
 ```css
 h1, h4 {
   text-align: center;
@@ -42,8 +39,7 @@ button {
   width: 100%;
 }
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 
 
diff --git a/docs/code-template/template-build-tutorial/3.-question-screen.md b/docs/code-template/template-build-tutorial/3.-question-screen.md
@@ -6,8 +6,7 @@ Take a look at the code below and carefully review the nested elements in this b
 
 **Update your question screen HTML to match the code below.** 
 
-{% code-tabs %}
-{% code-tabs-item title="HTML" %}
+{% code title="HTML" %}
 ```markup
 <!-------------- QUESTION SCREEN --------------->
 <div class='screen' id='question-screen'>
@@ -22,8 +21,7 @@ Take a look at the code below and carefully review the nested elements in this b
   <h1 id="feedback">Feedback will go here.</h1>
 </div>
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 No additional CSS needed for the question screen, since we already added style for _buttons_ and the _screen_ class. Yea!
 
diff --git a/docs/code-template/template-build-tutorial/4.-thank-you-screen.md b/docs/code-template/template-build-tutorial/4.-thank-you-screen.md
@@ -6,8 +6,7 @@ Below you see that we are updating the thank you screen much like your welcome s
 
 **Update your** _**thank you screen**_ **HTML to match the code below.**
 
-{% code-tabs %}
-{% code-tabs-item title="HTML" %}
+{% code title="HTML" %}
 ```markup
 <!-------------- THANK YOU SCREEN --------------->
 <div class='screen' id='thankyou-screen'>
@@ -16,8 +15,7 @@ Below you see that we are updating the thank you screen much like your welcome s
   <button class="start-btn">Restart</button>
 </div>
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 Again, no additional CSS to add.
 
diff --git a/docs/code-template/template-build-tutorial/5.-core-js-functions.md b/docs/code-template/template-build-tutorial/5.-core-js-functions.md
@@ -2,22 +2,20 @@
 
 ### HTML to Load JavaScript Libraries
 
-In the code below the script tags load [**libraries**](https://docs.idew.org/principles-and-practices/principles/programming-principles/libraries) that make coding your game much easier. **To all the people that work on free and open source projects, thank you!!** You are adding the [tabletop.js](https://github.com/jsoma/tabletop), [jquery](https://jquery.com/), [p5.js](https://p5js.org/), and the iDEW trivia libraries here.
+In the code below the script tags load [**libraries**](https://docs.idew.org/principles-and-practices/principles/programming-principles/libraries) that make coding your game much easier. **To all the people that work on free and open source projects, thank you!!** You are adding the [papaparse](https://www.papaparse.com/), [jquery](https://jquery.com/), [p5.js](https://p5js.org/), and the iDEW trivia libraries here.
 
-**Add the code below to the bottom of your HTML body. \(Place just before the tag for your custom JS code`<script src="code.js"></script>` if needed.**
+**Add the code below to the bottom of your HTML body. \(Place just before the tag for your custom JS code`<script src="script.js"></script>` if needed.**
 
-{% code-tabs %}
-{% code-tabs-item title="HTML" %}
+{% code title="HTML" %}
 ```markup
 <!-- JS Libraries -->
-<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js'></script>
 <script src="https://cdn.jsdelivr.net/gh/idewcomputing/code-trivia/src/trivia.js"></script> <!-- iDEW trivia -->
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
 ### Core JavaScript Functions of Trivia Game
 
@@ -27,10 +25,9 @@ We are assuming you don't want your trivia game to be a static page and make peo
 * **displayWelcome\( \) , displayQuestion\( \) ,  displayThankyou\( \)** These functions control what is displayed for each of our screens.
 * **onClickedAnswer\( \) , onClickedStart\( \)** These functions control what happens when buttons are clicked.
 
-**Copy the JavaScript below and paste it in a new** _**code.js**_ **file.** Nothing new will happen just yet. That's next.
+**Copy the JavaScript below and paste it in a new** _**script.js**_ **file.** Nothing new will happen just yet. That's next.
 
-{% code-tabs %}
-{% code-tabs-item title="JavaScript \(code.js\)" %}
+{% code title="JavaScript \(code.js\)" %}
 ```javascript
 //Runs once at the beginning
 function setup() {
@@ -58,8 +55,7 @@ function onClickedStart() {
 }
 
 ```
-{% endcode-tabs-item %}
-{% endcode-tabs %}
+{% endcode %}
 
  
 
diff --git a/docs/code-template/template-build-tutorial/6.-load-questions-and-go.md b/docs/code-template/template-build-tutorial/6.-load-questions-and-go.md
diff --git a/docs/code-template/template-build-tutorial/7.-respond-to-answer-clicks.md b/docs/code-template/template-build-tutorial/7.-respond-to-answer-clicks.md
diff --git a/docs/code-template/template-build-tutorial/8.-finishing-the-game.md b/docs/code-template/template-build-tutorial/8.-finishing-the-game.md
diff --git a/docs/code-template/template-build-tutorial/9.-visual-enhancement.md b/docs/code-template/template-build-tutorial/9.-visual-enhancement.md
diff --git a/docs/code-template/template-build-tutorial/README.md b/docs/code-template/template-build-tutorial/README.md
