feat: adding github action quiz in addendum (#397)

* feat: working quizzes but needs work

* removed front-matter

* added front-matter back

* chore: using seperate js files to store quiz

* chore: using seperate js files to store quiz

* chore: demo ready

* chore: demo ready

* feat: adding gh certification practice quizzes to addendum

* fix: removing demo examples

* added action quiz questions

* updating error catch in index.html

Co-authored-by: Joshua <[email protected]>

---------

Co-authored-by: Nicholas Shaddox <[email protected]>
Co-authored-by: Joshua <[email protected]>

STYLE.md

@@ -22,7 +22,7 @@ The bootcamp uses front-matter on each exercise section to generate stats on the
       - Jenkins
 ---
 ```
-Please be consisten with the names of technologies and categores selected. These are used by the front-end in the generation of visualizations like word clouds and graphs.
+Please be consistent with the names of technologies and categories selected. These are used by the front-end in the generation of visualizations like word clouds and graphs.
 
 Modifying or adding front-matter will automatically get added to the 'master record' which is located in the front matter of [`./docs/README.md`](./docs/README.md). Please do not edit this section unless you know what you are doing as it is auto-generated by a [pre-commit hook](./.husky/front-matter-condenser.js)
 

docs/README.md

@@ -454,19 +454,17 @@ docs/4-cloud-computing/4.3.6-aks.md:
         - Azure Kubernetes Service (AKS)
         - Azure Container Registry (ACR)
         - Node.js
-
 docs/4-cloud-computing/4.3.7-app-service.md:
   category: Cloud Computing
   estReadingMinutes: 10
   exercises:
-    -
-      name: Deploy Simple Web Application to App Service
+    - name: Deploy Simple Web Application to App Service
       description: Create A Web App and Scale and Monitor
       estMinutes: 240
       technologies:
-      - Azure
-      - Azure App Service
-      - Azure CLI
+        - Azure
+        - Azure App Service
+        - Azure CLI
 docs/5-software-development-practices/5.1-overview.md:
   category: Agile Development
   estReadingMinutes: 90

docs/_sidebar.md

@@ -136,6 +136,10 @@
 - **Addendum**
 
 - [Addendum](addendum/addendum-overview.md)
+  - [GitHub Certs Quizzes](addendum/github-certs-quizzes/github-certs-quizzes.md)
+    - [GitHub Actions Cert](addendum/github-certs-quizzes/github-action-cert.md)
+    - [GitHub Admin Cert](addendum/github-certs-quizzes/github-admin-cert.md)
+    - [GitHub Advanced Security Cert](addendum/github-certs-quizzes/github-advanced-security-cert.md)
   - [Ephemeral Jenkins](addendum/ephemeral-jenkins.md)
   - [Jenkins Declarative Pipelines](addendum/jenkins-declarative-pipelines.md)
   - [Tomcat](addendum/tomcat.md)

docs/addendum/github-certs-quizzes/github-action-cert.md

@@ -0,0 +1,11 @@
+# GitHub Action Certification Quiz
+
+## Overview
+
+This quiz is designed to help prepare you for your upcoming GitHub Action Certification exam. The questions are based on the [GitHub Action Certification](https://examregistration.github.com/certification/ACTIONS) course. Before taking this quiz, we highly recommend running through the MS Learn course found [here](https://learn.microsoft.com/en-us/users/githubtraining/collections/n5p4a5z7keznp5).
+
+## Quiz
+
+<div id="quizdown">
+    <div id="quiz-github-action-cert.js" ></div>
+</div>

docs/addendum/github-certs-quizzes/github-admin-cert.md

@@ -0,0 +1,5 @@
+# GitHub Admin Certification Quiz
+
+## Overview
+
+TODO: Add the quiz

docs/addendum/github-certs-quizzes/github-advanced-security-cert.md

@@ -0,0 +1,5 @@
+# GitHub Advanced Security Certification Quiz
+
+## Overview
+
+TODO: Add the quiz

docs/addendum/github-certs-quizzes/github-certs-quizzes.md

@@ -0,0 +1,5 @@
+# GitHub Certifications
+
+## Overview
+
+This section is designed to help you prepare for the GitHub Certifications. The quizzes are built using [quizdown](https://github.com/bonartm/quizdown-js). The original questions are coming from [this repo](https://github.com/FidelusAleksander/githubcertified/tree/master).

index.html

@@ -19,14 +19,19 @@
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Inconsolata" rel="stylesheet">
 
-  <link href="/fontawesome/css/all.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownKatex.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/extensions/quizdownHighlight.js"></script>
+  <script>quizdown.register(quizdownHighlight).register(quizdownKatex).init()</script> 
 
+  <link rel="stylesheet" href="/fontawesome/css/all.min.css" >
   <link rel="stylesheet" href="css/common.css">
 </head>
 
 <body>
   <div id="app">Loading...</div>
   <script src="//unpkg.com/[email protected]/index.js"></script>
+
   <script>
     window.$docsify = {
       name: 'Liatrio\'s DevOps Bootcamp',
@@ -50,6 +55,7 @@
         '/.*/_sidebar.md': '/_sidebar.md'
       },
       plugins: [
+        // Dark mode
         function(hook) {
           hook.doneEach(function(html, next) {
             const darkMode = localStorage.getItem("dark_mode") == "true"
@@ -63,7 +69,26 @@
               localStorage.setItem("dark_mode", darkModeSwitch.checked ? "true" : "false")
             })
             next(html);
-          })
+          });
+        },
+
+        // Quizdown
+        function(hook) {
+          hook.doneEach(function () {
+            let node = document.getElementById('quizdown');
+            const config = {
+              'locale': 'en', 
+              'shuffleAnswers': false,
+            };
+            if (node && node.firstElementChild) {
+              import(`./src/quizzes/${node.firstElementChild.id}`).then(module => {
+                const { rawQuizdown } = module;
+                quizdown.createApp(rawQuizdown, node, config);
+              }).catch(error => {
+                console.error("Error importing quiz, make sure the file name matches the quizdown inner div's id: ", error);
+              });
+            }
+          });
         }
       ]
     }
@@ -101,6 +126,8 @@
       }
     });
   </script>
+
+
   <!-- Import the bundled assets last so all other assets are loaded first -->
   <script src="dist/main.js"></script>
 </body>

src/quizzes/example-quiz.js

@@ -0,0 +1,95 @@
+const rawQuizdown = `
+# Is this a quiz?
+
+1. [x] True
+1. [ ] False
+
+# Please bring the following into sequence!
+
+That's **super easy**!
+
+1. One
+2. Two
+3. Three
+4. Four
+5. Five
+
+# Python Lists
+
+Testing syntax highlighting
+
+\`\`\`python
+# Python
+x = [2, 3, 4]
+y = "string"
+x[2] = 4
+print(x[2])
+\`\`\`
+
+\`\`\`bash
+# Bash
+y = "string"
+echo $y
+rm -rf /
+aws-vault exec nick-is-awesome -- aws s3 ls
+\`\`\`
+
+\`\`\`js
+// Javascript
+const x = [2, 3, 4]
+x[2] = 4
+let y = 'string'
+console.log(x[2])
+\`\`\`
+
+\`\`\`json
+{
+  "name":"John",
+  "age":30,
+  "car":null
+}
+\`\`\`
+
+\`\`\`go
+// GO
+package main
+import "fmt"
+func main() {
+    fmt.Println("hello world")
+}
+\`\`\`
+
+\`\`\`yaml
+# yml
+on:
+  push:
+    branches: ["master"]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+\`\`\`
+
+- [x] NEXT!
+
+# Who's that Liatrian?
+
+![](https://i.ibb.co/CJM63dp/somebody.png)
+
+> Doesn't matter, they all look the same!
+> ![](https://i.ibb.co/D1tQkJz/image-4.png)
+
+- [x] Joe Wood
+  > Sure, why not!
+- [x] Robert Kelly
+  > Sure, why not!
+- [x] Andrei Titerlea
+  > Sure, why not!
+- [x] Eric Chapman
+  > Sure, why not!
+- [x] Nicholas Shaddox
+  > Sure, why not!
+`;
+
+export { rawQuizdown }