Courses UI: Add FAQ popup to landing page

app/styles/courses/mock1/courses.sass

@@ -12,6 +12,9 @@
   .course-panel
     margin: 20px
 
+  .faq-blurb
+    font-size: 14px
+
   .row-pick-class
     display: none
 
@@ -56,4 +59,13 @@
     font-size: 20px
 
   .img-quote
-    height: 140px
+    height: 160px
+
+  .popover
+    z-index: 1050
+    min-width: 400px
+
+    h3
+      background: transparent
+      border: 0
+      font-size: 30px

app/templates/courses/mock1/courses.jade

@@ -68,7 +68,11 @@ block content
               li No coding experience necesssary
               li Easily monitor student progress
               
-            div Purchase a course for your entire class. It's easy to sign up your students!
+            p Purchase a course for your entire class. It's easy to sign up your students!
+            p.faq-blurb
+              span.spr See the courses
+              a.spr.courses-faq FAQ
+              span for more information.
           .col-md-6
             img.img-quote(src="/images/pages/courses/coco_complab.png")
       p

app/views/courses/mock1/CoursesView.coffee

@@ -28,6 +28,10 @@ module.exports = class CoursesView extends RootView
     context.studentMode = @studentMode
     context
 
+  afterRender: ->
+    super()
+    @setupCoursesFAQPopover()
+
   initData: ->
     mockData = require 'views/courses/mock1/CoursesMockData'
     @courses = mockData.courses
@@ -39,6 +43,23 @@ module.exports = class CoursesView extends RootView
     @instances = mockData.instances
     @praise = mockData.praise[_.random(0, mockData.praise.length - 1)]
 
+  setupCoursesFAQPopover: ->
+    popoverTitle = "<h3>Courses FAQ<button type='button' class='close' onclick='$(&#39;.courses-faq&#39;).popover(&#39;hide&#39;);'>&times;</button></h3>"
+    popoverContent = "<p><strong>Q:</strong> What's the difference between these courses and the single player game?</p>"
+    popoverContent += "<p><strong>A:</strong> The single player game is designed for individuals, while the courses are designed for classes.</p>"
+    popoverContent += "<p>The single player game has items, gems, hero selection, leveling up, and in-app purchases.  Courses have classroom management features and streamlined student-focused level pacing.</p>"
+    @$el.find('.courses-faq').popover(
+      animation: true
+      html: true
+      placement: 'top'
+      trigger: 'click'
+      title: popoverTitle
+      content: popoverContent
+      container: @$el
+    ).on 'shown.bs.popover', =>
+      application.tracker?.trackEvent 'Subscription payment methods hover'
+
+
   onClickBuy: (e) ->
     courseID = $(e.target).data('course-id') ? 0
     app.router.navigate("/courses/mock1/enroll/#{courseID}")