Teacher quest UI part 1

codecombat · Mar 19, 2017 · f47e083 · f47e083
1 parent cc85c2b
commit f47e083
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/app/styles/courses/teacher-classes-view.sass b/app/styles/courses/teacher-classes-view.sass
@@ -120,3 +120,23 @@
   .create-class
     margin-top: 65px
     margin-bottom: 65px
+
+  .center
+    text-align: center
+
+  .teacher-quests
+    border: 1px solid gray
+    margin: 20px 80px 40px 80px
+    padding: 10px
+    .quests-summary-col
+    .quests-list-col
+      .quest-complete
+        font-size: 12px
+        opacity: 0.5
+        text-decoration: line-through
+      .quest-incomplete
+    .see-all-quests
+      float: right
+      color: black
+      margin-right: 1rem
+      text-decoration: underline
diff --git a/app/templates/courses/teacher-classes-view.jade b/app/templates/courses/teacher-classes-view.jade
@@ -33,6 +33,10 @@ block content
 
 
 
+    .container
+      +teacher-quests
+
+    //- TODO: above or below teacher quests?
     .container
       div#classes-nag-subview
 
@@ -127,3 +131,48 @@ mixin archivedClassRow(classroom)
     .col-xs-2
       .class-links.pull-right
         a.unarchive-classroom.text-h6(data-i18n='teacher.unarchive_class' data-classroom-id=classroom.id)
+
+mixin teacher-quests
+  .teacher-quests
+    .row
+      .col-sm-3.quests-summary-col
+        h1.center 37%
+        .center TODO: pie chart
+        .center Teacher Quests
+      .col-sm-9.quests-list-col
+        strong.center Keep going! Here's what you can do next:
+        - var lastComplete = null;
+        - var nextIncomplete = null;
+        each quest in view.teacherQuestData
+          if quest.complete
+            - lastComplete = quest;
+          else if !nextIncomplete
+            - nextIncomplete = quest;
+        - lastComplete.lastComplete = true;
+        - nextIncomplete.nextIncomplete = true;
+        each quest in view.teacherQuestData
+          if quest.complete
+            if quest.lastComplete
+              .quest-complete.hide
+                +teacherQuest(quest)
+            else
+              .quest-complete
+                +teacherQuest(quest)
+          else
+            if quest.nextIncomplete
+              .quest-incomplete
+                +teacherQuest(quest)
+            else
+              .quest-incomplete.hide
+                +teacherQuest(quest)
+    .row
+      .col-md-12
+        a.see-all-quests See all quests
+
+mixin teacherQuest(quest)
+  div !{quest.title}
+  if (quest.steps || []).length > 0
+    ul
+      each step in quest.steps || []
+        li !{step}
+
diff --git a/app/views/courses/TeacherClassesView.coffee b/app/views/courses/TeacherClassesView.coffee
@@ -20,6 +20,57 @@ module.exports = class TeacherClassesView extends RootView
   template: template
   helper: helper
 
+  # TODO: where to track this data?
+  teacherQuestData:
+    'create_classroom':
+      title: 'Create Classroom'
+      complete: true
+    'add_students':
+      title: 'Add Students'
+      complete: true
+    'teach_calls':
+      title: 'Teach your students to call methods.'
+      complete: false
+      steps: [
+        "<a href='http://files.codecombat.com/docs/resources/StudentQuickStartGuide.pdf'>Print out the Student Quick Start Guide in the Resource Hub.</a>"
+      ]
+    'teach_strings':
+      title: 'Teach your students <strong>strings</strong>.'
+      complete: false
+      steps: [
+        'Play True Names as a teacher.'
+      ]
+    'teach_loops':
+      title: 'Teach your students <strong>loops</strong>.'
+      complete: false
+      steps: [
+        'Use the Loops Activity in the CS1 Curriculum guide.'
+      ]
+    'teach_variables':
+      title: 'Teach your students <strong>variables</strong>.'
+      complete: false
+      steps: [
+        'Print out the Python Syntax guide located in the Resource Hub.'
+      ]
+    'kithgard_gates_100':
+      title: 'Get 100% of class to Kithguard Gates.'
+      complete: false
+      steps: [
+        'Print out the Engineering Cycle Worksheet in the Resource Hub.'
+      ]
+    'through_wakka_maul':
+      title: 'Get your students through Wakka Maul.'
+      complete: false
+      steps: [
+        'Read the Arena Levels - Teacher Guide in the Resource Hub.'
+      ]
+    'reach_gamedev':
+      title: 'Get to new World (GameDev)'
+      complete: false
+      steps: [
+        'Create a license request.'
+      ]
+
   events:
     'click .edit-classroom': 'onClickEditClassroom'
     'click .archive-classroom': 'onClickArchiveClassroom'
@@ -29,6 +80,7 @@ module.exports = class TeacherClassesView extends RootView
     'click .create-teacher-btn': 'onClickCreateTeacherButton'
     'click .update-teacher-btn': 'onClickUpdateTeacherButton'
     'click .view-class-btn': 'onClickViewClassButton'
+    'click .see-all-quests': 'onClickSeeAllQuests'
 
   getTitle: -> return $.i18n.t('teacher.my_classes')
 
@@ -154,3 +206,7 @@ module.exports = class TeacherClassesView extends RootView
           @courseInstances.add(courseInstance)
           @listenToOnce courseInstance, 'sync', @addFreeCourseInstances
           return
+
+  onClickSeeAllQuests: (e) ->
+    $(e.target).addClass('hide')
+    $('.quest-complete,.quest-incomplete').removeClass('hide')