Add MOOCs application

csunplugged/config/__init__.py

@@ -1,3 +1,3 @@
 """Module for Django system configuration."""
 
-__version__ = "6.3.0"
+__version__ = "6.4.0"

csunplugged/config/settings/base.py

@@ -62,6 +62,7 @@
     "search.apps.SearchConfig",
     "classic.apps.ClassicConfig",
     "at_home.apps.AtHomeConfig",
+    "moocs.apps.MoocsConfig",
 ]
 
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps

csunplugged/config/urls.py

@@ -18,6 +18,7 @@
     path('resources/', include('resources.urls', namespace='resources')),
     path('at-home/', include('at_home.urls', namespace='at_home')),
     path('plugging-it-in/', include('plugging_it_in.urls', namespace='plugging_it_in')),
+    path('moocs/', include('moocs.urls', namespace='moocs')),
 )
 
 urlpatterns += [

csunplugged/gulpfile.js

@@ -50,6 +50,7 @@ function pathsConfig(appName) {
         scss_source: `${staticSourceRoot}/scss`,
         js_source: `${staticSourceRoot}/js`,
         images_source: `${staticSourceRoot}/img`,
+        files_source: `${staticSourceRoot}/files`,
         vendor_js_source: [
             `${vendorsRoot}/jquery/dist/jquery.js`,
             `${vendorsRoot}/popper.js/dist/umd/popper.js`,
@@ -63,6 +64,7 @@ function pathsConfig(appName) {
         fonts_output: `${staticOutputRoot}/fonts`,
         images_output: `${staticOutputRoot}/img`,
         js_output: `${staticOutputRoot}/js`,
+        files_output: `${staticOutputRoot}/files`,
     }
 }
 
@@ -167,6 +169,12 @@ function img() {
         .pipe(dest(paths.images_output))
 }
 
+// Downloadable files
+function files() {
+    return src(`${paths.files_source}/**/*`)
+        .pipe(dest(paths.files_output))
+}
+
 // Browser sync server for live reload
 // TODO: Not yet working
 // function initBrowserSync() {
@@ -202,7 +210,8 @@ const generateAssets = parallel(
     scss,
     js,
     vendorJs,
-    img
+    img,
+    files
 )
 
 // Set up dev environment

csunplugged/moocs/__init__.py

@@ -0,0 +1 @@
+"""Module for the MOOCs application."""

csunplugged/moocs/apps.py

@@ -0,0 +1,9 @@
+"""Application configuration for the MOOCs application."""
+
+from django.apps import AppConfig
+
+
+class MoocsConfig(AppConfig):
+    """Configuration object for the MOOCs application."""
+
+    name = "moocs"

csunplugged/moocs/urls.py

@@ -0,0 +1,14 @@
+"""URL routing for the moocs application."""
+
+from django.urls import path
+
+from . import views
+
+app_name = 'moocs'
+urlpatterns = [
+    path(
+        '',
+        views.MoocsIndexView.as_view(),
+        name="index"
+    ),
+]

csunplugged/moocs/views.py

@@ -0,0 +1,9 @@
+"""Views for the MOOCs application."""
+
+from django.views.generic import TemplateView
+
+
+class MoocsIndexView(TemplateView):
+    """View for the MOOCs homepage that renders from a template."""
+
+    template_name = "moocs/index.html"

csunplugged/static/img/moocs/edx-logo.svg-LICENSE

@@ -0,0 +1,2 @@
+edX logo is a registered trademarks of edX Inc. All Rights Reserved.
+Used with permission from https://www.edx.org/media-kit

csunplugged/static/scss/website.scss

@@ -442,7 +442,7 @@ body {
 }
 
 ol, ul {
-    margin-bottom: 1rem !important;
+    margin-bottom: 1rem;
 }
 
 .large-text {
@@ -485,6 +485,12 @@ ol, ul {
         background-color: mix($educator-colour, $white, 10%);
       }
     }
+    &-educator-4 {
+      border-top-color: mix($educator-colour, $white, 40%);
+      &:hover {
+        background-color: mix($educator-colour, $white, 10%);
+      }
+    }
     &-at-home-1 {
       border-top-color: $at-home-colour;
       &:hover {
@@ -906,3 +912,11 @@ button:hover .icon-search {
 #classic-cs-unplugged-logo {
     height: 5rem;
 }
+
+
+// MOOCs
+
+.edx-logo {
+    height: 3rem;
+    margin-left: 0.5rem;
+}

csunplugged/templates/general/index.html

@@ -20,16 +20,16 @@ <h1 class="text-center text-white text-shadow">
             </h1>
             <div class="row justify-content-center">
                 <div class="col-12 col-md-10 col-lg-8 text-center">
-                    {% if LANGUAGE_CODE == "en" %}
-                        <a class="btn btn-warning text-wrap mb-3" role="button" href="{% url 'at_home:index' %}">
-                            <strong>COVID-19</strong>: Click here to see how to use CS Unplugged at home
-                        </a>
-                    {% endif %}
                     <p class="lead text-light text-wrap text-shadow">
                         {% blocktrans trimmed %}
                             CS Unplugged is a collection of free teaching material that teaches Computer Science through engaging games and puzzles that use cards, string, crayons and lots of running around.
                         {% endblocktrans %}
                     </p>
+                    {% if LANGUAGE_CODE == "en" %}
+                        <a class="btn btn-info text-wrap mb-4" role="button" href="{% url 'moocs:index' %}">
+                            <strong>New online course for educators available</strong> - Click here to learn more
+                        </a>
+                    {% endif %}
                 </div>
             </div>
         </div>
@@ -76,6 +76,11 @@ <h3 class="mb-0">
                         {% trans "Curriculum Integrations" %}
                     </h3>
                 </a>
+                <a class="link-item link-item-top link-item-top-educator-4 no-text-decoration d-block mb-3" href="{% url 'moocs:index' %}">
+                    <h3 class="mb-0">
+                        {% trans "Online Courses" %}
+                    </h3>
+                </a>
             </div>
             <div class="col-12 col-md-4 mb-4">
                 <h2 class="at-home-colour">At home</h2>

csunplugged/templates/moocs/index.html

@@ -0,0 +1,124 @@
+{% extends "base-educators.html" %}
+
+{% load i18n %}
+{% load static %}
+{% load django_bootstrap_breadcrumbs %}
+
+{% block title %}
+  {% trans "Online Courses" %}
+{% endblock title %}
+
+{% block breadcrumbs %}
+  {% breadcrumb "Online Courses" "moocs:index" %}
+{% endblock breadcrumbs %}
+
+{% block page_heading %}
+  <h1>{% trans "Online Courses" %}</h1>
+{% endblock page_heading %}
+
+{% block content %}
+    <p class="lead">
+        {% blocktrans trimmed %}
+        The following massive open online courses have been created by the CS Unplugged team.
+        {% endblocktrans %}
+    </p>
+
+    <hr>
+
+    {# <img src="{% static 'img/moocs/teaching-computational-thinking.png' %}"  alt="Teacher talking to students"> #}
+
+    <h2>Teaching Computational Thinking</h2>
+    <h6 class="mb-2 text-muted">Available in English</h6>
+
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <h4>Summary</h4>
+            <p>
+                This course is for educators who are passionate about the future of their 7-12+ year old students and want to learn more about teaching computer science in an engaging and meaningful way.
+            </p>
+
+            <a class="link-item no-text-decoration d-inline-block mb-3" href="https://www.edx.org/course/teaching-computational-thinking">
+                <div class="d-flex align-items-center">
+                    {% trans "Click here to view course on" %}
+                    <img class="img-fluid edx-logo" src="{% static 'img/moocs/edx-logo.svg' %}" alt="EdX logo">
+                </div>
+            </a>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <h4>Course contents and resources</h4>
+
+            <ul>
+                <li class="mb-2">
+                    <a href="{% url 'topics:unit_plan' 'sorting-networks' 'unit-plan' %}">Sorting networks</a>
+                </li>
+                <li class="mb-2">
+                    <a href="{% url 'topics:unit_plan' 'binary-numbers' 'unit-plan' %}">Binary numbers</a>
+                </li>
+                <li class="mb-2">
+                    <a href="{% url 'topics:unit_plan' 'image-representation' 'unit-plan' %}">Image representation</a>
+                    <ul>
+                        <li>
+                            <a href="{% static 'files/mooc/teaching-computational-thinking/Image representation - Exploring pixels worksheets.pdf' %}" download>
+                                Exploring pixels worksheets
+                            </a> - A3 size
+                        </li>
+                        <li>
+                            <a href="http://csunplugged.mines.edu/activity-computer_vision.html">
+                                CS@Mines computer vision worksheet
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <li class="mb-2">
+                    <a href="{% url 'topics:unit_plan' 'error-detection-and-correction' 'unit-plan' %}">Error detection and correction</a>
+                    <ul>
+                        <li>
+                            <a href="{% static 'files/mooc/teaching-computational-thinking/Error Detection and Correction - Will It Scan.pdf' %}" download>
+                                Will it scan activity
+                            </a> - Includes sample QR codes for printing
+                        </li>
+                    </ul>
+                </li>
+                <li class="mb-2">
+                    Human computer Interaction (HCI)
+                    <ul>
+                        <li>
+                            <a href="{% static 'files/mooc/teaching-computational-thinking/HCI - Think-aloud lesson.pdf' %}" download>
+                                Think-aloud protocol lesson plan
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{% static 'files/mooc/teaching-computational-thinking/HCI - The Stroop effect lesson.pdf' %}" download>
+                                Stroop effect lesson plan
+                            </a>
+                            <ul>
+                                <li>
+                                    <a href="{% static 'files/mooc/teaching-computational-thinking/HCI - The Stroop effect lesson - Printable.pdf' %}" download>
+                                        Activity printable
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <a href="{% static 'files/mooc/teaching-computational-thinking/HCI - Heuristics lesson.pdf' %}" download>
+                                Nielsen’s heuristics lesson plan
+                            </a>
+                            <ul>
+                                <li>
+                                    <a href="{% static 'files/mooc/teaching-computational-thinking/HCI - Heuristics lesson - Bingo board.pdf' %}" download>
+                                        Activity printable
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <hr>
+
+    <p><small>edX logo is a registered trademarks of edX Inc. All Rights Reserved.</small></p>
+
+{% endblock content %}