Skip to content

Commit 0c2dcd5

Browse files
anselrognlieanselrognlie
committed
adds completion snippet for progress tracking
1 parent 072d9d0 commit 0c2dcd5

File tree

6 files changed

+289
-12
lines changed

6 files changed

+289
-12
lines changed

‎_.config.yml‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎_config.yml‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,9 @@
1-
theme: jekyll-theme-minimal
1+
theme: jekyll-theme-minimal
2+
# baseUrl: https://adadevelopersacademy.org/wp-json/ada-aba/v1/
3+
# lessons:
4+
# - url: /learning-at-ada/ada-languages/
5+
# slug: TnjmzZkMv9
6+
# - url: /learning-at-ada/internet-searching/
7+
# slug: ZqNCTkGVrn
8+
# - url: /learning-at-ada/problem-solving/
9+
# slug: sJLCNcnhXR

‎_includes/complete-lesson.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% for lesson in site.lessons %}
2+
{% if page.url == lesson.url %}
3+
<h3>Complete This Lesson</h3>
4+
<form id="ada-build-form-lesson" data-lesson-id="{{ lesson.slug }}" data-base-url="{{ site.baseUrl }}">
5+
<script src="{{ "/assets/js/complete-lesson.js" | relative_url }}"></script>
6+
<p>
7+
Complete this lesson by entering your Learner ID and clicking the complete button.
8+
Then click the Verify link in the email that will be sent to you.
9+
Don't have a Learner ID? Register at the <a href="https://www.adadevelopersacademy.org/ada-build">Ada Build registration</a> page!
10+
</p>
11+
<!-- spinner from https://loading.io/css/ -->
12+
<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>
13+
<input type="submit" id="ada-build-button-complete" value="Complete">
14+
<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>
15+
<div id="ada-build-success-message">
16+
<p>One more step to mark your lesson as complete! Check your email and click the verification link.</p>
17+
</div>
18+
<div id="ada-build-error-message">
19+
<p>There was an error completing the lesson. Confirm your learner id and try again later.</p>
20+
</div>
21+
</form>
22+
{% endif %}
23+
{% endfor %}

‎_layouts/default.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="{{ site.lang | default: "en-US" }}">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
{% seo %}
9+
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
10+
<!--[if lt IE 9]>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
12+
<![endif]-->
13+
{% include head-custom.html %}
14+
</head>
15+
<body>
16+
<div class="wrapper">
17+
<header>
18+
<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
19+
20+
{% if site.logo %}
21+
<img src="{{site.logo | relative_url}}" alt="Logo" />
22+
{% endif %}
23+
24+
<p>{{ site.description | default: site.github.project_tagline }}</p>
25+
26+
{% if site.github.is_project_page %}
27+
<p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
28+
{% endif %}
29+
30+
{% if site.github.is_user_page %}
31+
<p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
32+
{% endif %}
33+
34+
{% if site.show_downloads %}
35+
<ul class="downloads">
36+
<li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
37+
<li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
38+
<li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
39+
</ul>
40+
{% endif %}
41+
</header>
42+
<section>
43+
44+
{{ content }}
45+
46+
{% include complete-lesson.html %}
47+
48+
</section>
49+
<footer>
50+
{% if site.github.is_project_page %}
51+
<p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
52+
{% endif %}
53+
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
54+
</footer>
55+
</div>
56+
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
57+
</body>
58+
</html>

‎assets/css/style.scss‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
---
3+
4+
@import "{{ site.theme }}";
5+
6+
#ada-build-success-message {
7+
display: none;
8+
}
9+
10+
#ada-build-success-message.active-result {
11+
display: block;
12+
}
13+
14+
#ada-build-success-message p {
15+
margin-top: 1em;
16+
color: darkgreen;
17+
border: 1px solid green;
18+
border-radius: 0.5em;
19+
padding: 0.5em;
20+
}
21+
22+
#ada-build-error-message {
23+
display: none;
24+
}
25+
26+
#ada-build-error-message.active-result {
27+
display: block;
28+
}
29+
30+
#ada-build-error-message p {
31+
margin-top: 1em;
32+
color: red;
33+
border: 1px solid red;
34+
border-radius: 0.5em;
35+
padding: 0.5em;
36+
}
37+
38+
/* busy spinner, from https://loading.io/css/ */
39+
40+
.lds-spinner.not-loading
41+
{
42+
display: none;
43+
}
44+
45+
.lds-spinner,
46+
.lds-spinner div,
47+
.lds-spinner div:after {
48+
box-sizing: border-box;
49+
}
50+
.lds-spinner {
51+
color: currentColor;
52+
display: inline-block;
53+
position: relative;
54+
width: 14px;
55+
height: 14px;
56+
}
57+
.lds-spinner div {
58+
transform-origin: 10px 10px;
59+
animation: lds-spinner 1.2s linear infinite;
60+
}
61+
.lds-spinner div:after {
62+
content: " ";
63+
display: block;
64+
position: absolute;
65+
top: 0.8px;
66+
left: 9.2px;
67+
width: 1.6px;
68+
height: 4.4px;
69+
border-radius: 20%;
70+
background: currentColor;
71+
}
72+
.lds-spinner div:nth-child(1) {
73+
transform: rotate(0deg);
74+
animation-delay: -1.1s;
75+
}
76+
.lds-spinner div:nth-child(2) {
77+
transform: rotate(30deg);
78+
animation-delay: -1s;
79+
}
80+
.lds-spinner div:nth-child(3) {
81+
transform: rotate(60deg);
82+
animation-delay: -0.9s;
83+
}
84+
.lds-spinner div:nth-child(4) {
85+
transform: rotate(90deg);
86+
animation-delay: -0.8s;
87+
}
88+
.lds-spinner div:nth-child(5) {
89+
transform: rotate(120deg);
90+
animation-delay: -0.7s;
91+
}
92+
.lds-spinner div:nth-child(6) {
93+
transform: rotate(150deg);
94+
animation-delay: -0.6s;
95+
}
96+
.lds-spinner div:nth-child(7) {
97+
transform: rotate(180deg);
98+
animation-delay: -0.5s;
99+
}
100+
.lds-spinner div:nth-child(8) {
101+
transform: rotate(210deg);
102+
animation-delay: -0.4s;
103+
}
104+
.lds-spinner div:nth-child(9) {
105+
transform: rotate(240deg);
106+
animation-delay: -0.3s;
107+
}
108+
.lds-spinner div:nth-child(10) {
109+
transform: rotate(270deg);
110+
animation-delay: -0.2s;
111+
}
112+
.lds-spinner div:nth-child(11) {
113+
transform: rotate(300deg);
114+
animation-delay: -0.1s;
115+
}
116+
.lds-spinner div:nth-child(12) {
117+
transform: rotate(330deg);
118+
animation-delay: 0s;
119+
}
120+
@keyframes lds-spinner {
121+
0% {
122+
opacity: 1;
123+
}
124+
100% {
125+
opacity: 0;
126+
}
127+
}
128+

‎assets/js/complete-lesson.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
(function () {
2+
3+
class LessonApi {
4+
constructor(baseUrl) {
5+
this.baseUrl = baseUrl;
6+
}
7+
8+
async completeLessonApi(lessonID, learnerID) {
9+
const response = await fetch(`${this.baseUrl}completion/`, {
10+
headers: {
11+
'Content-Type': 'application/json',
12+
},
13+
method: 'POST',
14+
body: JSON.stringify({
15+
lesson: lessonID,
16+
u: learnerID,
17+
}),
18+
});
19+
20+
if (response.status !== 200) {
21+
throw new Error('The request could not be completed. Try again later.');
22+
}
23+
24+
return await response.json();
25+
}
26+
}
27+
28+
function registerEvents() {
29+
const kActiveResult = 'active-result';
30+
const kNotLoading = 'not-loading';
31+
32+
const frmLesson = document.getElementById('ada-build-form-lesson');
33+
const txtLearnerID = document.getElementById('ada-build-input-learner-id');
34+
const successMsg = document.getElementById('ada-build-success-message');
35+
const errorMsg = document.getElementById('ada-build-error-message');
36+
const spinner = document.getElementsByClassName('lds-spinner')[0];
37+
38+
const completeLesson = async (lessonID, learnerID) => {
39+
successMsg.classList.remove(kActiveResult);
40+
errorMsg.classList.remove(kActiveResult);
41+
spinner.classList.remove(kNotLoading);
42+
43+
try {
44+
const baseUrl = frmLesson.dataset.baseUrl;
45+
const api = new LessonApi(baseUrl);
46+
await api.completeLessonApi(lessonID, learnerID);
47+
successMsg.classList.add(kActiveResult);
48+
} catch (e) {
49+
errorMsg.classList.add(kActiveResult);
50+
} finally {
51+
spinner.classList.add(kNotLoading);
52+
}
53+
}
54+
55+
frmLesson.addEventListener('submit', async (e) => {
56+
e.preventDefault();
57+
58+
const lessonID = frmLesson.dataset.lessonId;
59+
const learnerID = txtLearnerID.value;
60+
61+
if (!learnerID) {
62+
alert("Please enter your Learner ID.");
63+
return
64+
}
65+
66+
await completeLesson(lessonID, learnerID);
67+
});
68+
}
69+
70+
document.addEventListener('DOMContentLoaded', registerEvents);
71+
})();

0 commit comments

Comments
 (0)