Merge pull request #304 from anselrognlie/master

Adds completion snippet for progress tracking
Ada-Developers-Academy · Apr 19, 2024 · 23afdb9 · 23afdb9
2 parents 072d9d0 + 0c2dcd5
commit 23afdb9
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 12 deletions.
diff --git a/_.config.yml b/_.config.yml
diff --git a/_config.yml b/_config.yml
@@ -1 +1,9 @@
-theme: jekyll-theme-minimal
+theme: jekyll-theme-minimal
+# baseUrl: https://adadevelopersacademy.org/wp-json/ada-aba/v1/
+# lessons:
+#   - url: /learning-at-ada/ada-languages/
+#     slug: TnjmzZkMv9
+#   - url: /learning-at-ada/internet-searching/
+#     slug: ZqNCTkGVrn
+#   - url: /learning-at-ada/problem-solving/
+#     slug: sJLCNcnhXR
diff --git a/_includes/complete-lesson.html b/_includes/complete-lesson.html
@@ -0,0 +1,23 @@
+{% for lesson in site.lessons %}
+  {% if page.url == lesson.url %}
+  <h3>Complete This Lesson</h3>
+  <form id="ada-build-form-lesson" data-lesson-id="{{ lesson.slug }}" data-base-url="{{ site.baseUrl }}">
+    <script src="{{ "/assets/js/complete-lesson.js" | relative_url }}"></script>
+    <p>
+      Complete this lesson by entering your Learner ID and clicking the complete button.
+      Then click the Verify link in the email that will be sent to you.
+      Don't have a Learner ID? Register at the <a href="https://www.adadevelopersacademy.org/ada-build">Ada Build registration</a> page!
+    </p>
+    <!-- spinner from https://loading.io/css/ -->
+    <div><label for="ada-build-input-learner-id">Learner ID:</label> <input type="text" id="ada-build-input-learner-id" placeholder="Enter your Learner ID"></div>
+    <input type="submit" id="ada-build-button-complete" value="Complete">
+    <div class="lds-spinner not-loading"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+        <div id="ada-build-success-message">
+      <p>One more step to mark your lesson as complete! Check your email and click the verification link.</p>
+    </div>
+    <div id="ada-build-error-message">
+      <p>There was an error completing the lesson. Confirm your learner id and try again later.</p>
+    </div>
+  </form>
+  {% endif %}
+{% endfor %}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+{% seo %}
+    <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
+    <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+    {% include head-custom.html %}
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
+
+        {% if site.logo %}
+          <img src="{{site.logo | relative_url}}" alt="Logo" />
+        {% endif %}
+
+        <p>{{ site.description | default: site.github.project_tagline }}</p>
+
+        {% if site.github.is_project_page %}
+        <p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
+        {% endif %}
+
+        {% if site.github.is_user_page %}
+        <p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
+        {% endif %}
+
+        {% if site.show_downloads %}
+        <ul class="downloads">
+          <li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
+          <li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
+          <li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
+        </ul>
+        {% endif %}
+      </header>
+      <section>        
+
+      {{ content }}
+
+      {% include complete-lesson.html %}
+
+      </section>
+      <footer>
+        {% if site.github.is_project_page %}
+        <p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+        {% endif %}
+        <p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
+      </footer>
+    </div>
+    <script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
+  </body>
+</html>
diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -0,0 +1,128 @@
+---
+---
+
+@import "{{ site.theme }}";
+
+#ada-build-success-message {
+  display: none;
+}
+
+#ada-build-success-message.active-result {
+  display: block;
+}
+
+#ada-build-success-message p {
+  margin-top: 1em;
+  color: darkgreen;
+  border: 1px solid green;
+  border-radius: 0.5em;
+  padding: 0.5em;
+}
+
+#ada-build-error-message {
+  display: none;
+}
+
+#ada-build-error-message.active-result {
+  display: block;
+}
+
+#ada-build-error-message p {
+  margin-top: 1em;
+  color: red;
+  border: 1px solid red;
+  border-radius: 0.5em;
+  padding: 0.5em;
+}
+
+/* busy spinner, from https://loading.io/css/ */
+
+.lds-spinner.not-loading
+{
+  display: none;
+}
+
+.lds-spinner,
+.lds-spinner div,
+.lds-spinner div:after {
+  box-sizing: border-box;
+}
+.lds-spinner {
+  color: currentColor;
+  display: inline-block;
+  position: relative;
+  width: 14px;
+  height: 14px;
+}
+.lds-spinner div {
+  transform-origin: 10px 10px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+.lds-spinner div:after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0.8px;
+  left: 9.2px;
+  width: 1.6px;
+  height: 4.4px;
+  border-radius: 20%;
+  background: currentColor;
+}
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
diff --git a/assets/js/complete-lesson.js b/assets/js/complete-lesson.js
@@ -0,0 +1,71 @@
+(function () {
+
+  class LessonApi {
+    constructor(baseUrl) {
+      this.baseUrl = baseUrl;
+    }
+
+    async completeLessonApi(lessonID, learnerID) {
+      const response = await fetch(`${this.baseUrl}completion/`, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          lesson: lessonID,
+          u: learnerID,
+        }),
+      });
+
+      if (response.status !== 200) {
+        throw new Error('The request could not be completed. Try again later.');
+      }
+
+      return await response.json();
+    }
+  }
+
+  function registerEvents() {
+    const kActiveResult = 'active-result';
+    const kNotLoading = 'not-loading';
+
+    const frmLesson = document.getElementById('ada-build-form-lesson');
+    const txtLearnerID = document.getElementById('ada-build-input-learner-id');
+    const successMsg = document.getElementById('ada-build-success-message');
+    const errorMsg = document.getElementById('ada-build-error-message');
+    const spinner = document.getElementsByClassName('lds-spinner')[0];
+
+    const completeLesson = async (lessonID, learnerID) => {
+      successMsg.classList.remove(kActiveResult);
+      errorMsg.classList.remove(kActiveResult);
+      spinner.classList.remove(kNotLoading);
+
+      try {
+        const baseUrl = frmLesson.dataset.baseUrl;
+        const api = new LessonApi(baseUrl);
+        await api.completeLessonApi(lessonID, learnerID);
+        successMsg.classList.add(kActiveResult);
+      } catch (e) {
+        errorMsg.classList.add(kActiveResult);
+      } finally {
+        spinner.classList.add(kNotLoading);
+      }
+    }
+
+    frmLesson.addEventListener('submit', async (e) => {
+      e.preventDefault();
+
+      const lessonID = frmLesson.dataset.lessonId;
+      const learnerID = txtLearnerID.value;
+
+      if (!learnerID) {
+        alert("Please enter your Learner ID.");
+        return
+      }
+
+      await completeLesson(lessonID, learnerID);
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', registerEvents);
+})();