2016-03-30 16:57:19 -04:00
extends /templates/base-flat
block page_nav
include ./teacher-dashboard-nav.jade
block content
- var classroom = view.classroom
2016-03-30 19:20:37 -04:00
if !me.isTeacher()
.alert.alert-danger.text-center
.container
// DNT: Temporary
h3 ATTENTION: Please upgrade your account to a Teacher Account.
p
| We are transitioning to a new improved classroom management system for instructors.
2016-05-05 12:54:21 -04:00
| Please convert your account to ensure you retain access to your classrooms.
2016-04-05 12:16:22 -04:00
a.btn.btn-primary.btn-lg(href="/teachers/update-account") Upgrade to teacher account
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
if classroom.loaded
.container
+breadcrumbs
2016-04-19 16:44:48 -04:00
if classroom.get('archived')
.row.center-block.text-center.m-t-3.m-b-3
.unarchive-btn.btn.btn-lg.btn-navy
span(data-i18n='teacher.unarchive_this_class')
2016-03-30 19:20:37 -04:00
h3.m-t-2= classroom.get('name')
2016-03-30 16:57:19 -04:00
a.label.edit-classroom(data-classroom-id=classroom.id)
span(data-i18n='teacher.edit_class_settings')
h4= classroom.get('description')
2016-05-05 12:54:21 -04:00
2016-03-30 19:20:37 -04:00
.classroom-info-row.row.m-t-5
2016-03-30 16:57:19 -04:00
.classroom-details.col-md-3
2016-04-19 16:44:48 -04:00
- var stats = state.get('classStats')
2016-03-30 19:20:37 -04:00
h4.m-b-2(data-i18n='teacher.class_overview')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.language.small-details
span(data-i18n='teacher.language')
span.spr :
span= classroom.capitalLanguage
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.student-count.small-details
span(data-i18n='teacher.students')
span.spr :
span= classroom.get('members').length
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.average-playtime.small-details
span(data-i18n='teacher.avg_playtime')
span.spr :
span= stats.averagePlaytime
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.total-playtime.small-details
span(data-i18n='teacher.total_playtime')
span.spr :
span= stats.totalPlaytime
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.average-complete.small-details
span(data-i18n='teacher.avg_completed')
span.spr :
span= stats.averageLevelsComplete
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.total-complete.small-details
span(data-i18n='teacher.total_completed')
span.spr :
span= stats.totalLevelsComplete
2016-05-05 12:54:21 -04:00
2016-04-28 14:28:02 -04:00
.total-complete.small-details
span(data-i18n='teacher.created')
span.spr :
2016-04-28 17:20:33 -04:00
span= moment(classroom.created()).format('l')
2016-05-05 12:54:21 -04:00
if view.students && view.students.models.length > 0
button.export-student-progress-btn.btn.btn-lg.btn-primary
span(data-i18n='teacher.export_student_progress')
2016-03-30 16:57:19 -04:00
//- .concepts.small-details
2016-04-19 16:44:48 -04:00
//- if state.get('progressData')
2016-03-30 16:57:19 -04:00
//- div
//- span(data-i18n='teacher.concepts_covered')
//- span :
//- - console.log('concepts', view.conceptData)
//- - concepts = view.conceptData
//- each state, name in view.conceptData[view.classroom.id]
2016-04-19 16:44:48 -04:00
//- if state.get('started')
//- b.concept(class=state.get('completed') ? 'forest' : 'gold')
2016-03-30 16:57:19 -04:00
//- span(data-i18n='concepts.'+name)
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
.completeness-info.col-md-4
2016-03-30 19:20:37 -04:00
h4.m-b-2
2016-04-19 16:44:48 -04:00
if state.get('earliestIncompleteLevel')
2016-03-30 19:20:37 -04:00
div.small-details
2016-03-30 16:57:19 -04:00
span(data-i18n='teacher.earliest_incomplete')
span :
2016-04-19 16:44:48 -04:00
+longLevelName(state.get('earliestIncompleteLevel'))
+inlineUserList(state.get('earliestIncompleteLevel').users)
if state.get('latestCompleteLevel')
2016-03-30 19:20:37 -04:00
div.small-details.m-t-3
2016-03-30 16:57:19 -04:00
span(data-i18n='teacher.latest_complete')
span :
2016-04-19 16:44:48 -04:00
+longLevelName(state.get('latestCompleteLevel'))
+inlineUserList(state.get('latestCompleteLevel').users)
2016-03-30 16:57:19 -04:00
.adding-students.col-md-5
2016-03-30 19:20:37 -04:00
h4.m-b-2
2016-03-30 16:57:19 -04:00
span(data-i18n='teacher.adding_students')
span :
+copyCodes
+addStudentsButton
2016-04-19 16:44:48 -04:00
2016-05-31 18:12:08 -04:00
if view.students.length > 0
ul.nav.nav-tabs.m-t-5(role='tablist')
- var activeTab = state.get('activeTab');
li(class=(activeTab === "#students-tab" ? 'active' : ''))
a.students-tab-btn(href='#students-tab')
.small-details.text-center(data-i18n='teacher.students')
.tab-spacer
li(class=(activeTab === "#course-progress-tab" ? 'active' : ''))
a.course-progress-tab-btn(href='#course-progress-tab')
.small-details.text-center(data-i18n='teacher.course_progress')
.tab-spacer
li(class=(activeTab === "#enrollment-status-tab" ? 'active' : ''))
a.course-progress-tab-btn(href='#enrollment-status-tab')
.small-details.text-center(data-i18n='teacher.enrollment_status')
2016-07-21 16:54:37 -04:00
//.tab-spacer
//li(class=(activeTab === "#student-projects-tab" ? 'active' : ''))
// a.course-progress-tab-btn(href='#student-projects-tab')
// .small-details.text-center(data-i18n='teacher.projects')
2016-05-31 18:12:08 -04:00
.tab-filler
.tab-content
if activeTab === '#students-tab'
+studentsTab
else if activeTab === '#course-progress-tab'
+courseProgressTab
2016-07-14 18:53:54 -04:00
else if activeTab === '#enrollment-status-tab'
2016-05-31 18:12:08 -04:00
+enrollmentStatusTab
2016-07-14 18:53:54 -04:00
else
+studentProjectsTab
2016-05-31 18:12:08 -04:00
else
.text-center.m-t-5.m-b-5
.text-h2
span(data-i18n="teacher.no_students_yet")
.text-h4
span(data-i18n="teacher.try_refreshing")
2016-04-19 16:44:48 -04:00
2016-03-30 16:57:19 -04:00
mixin breadcrumbs
.breadcrumbs
a(data-i18n='teacher.my_classes' href='/teachers/classes')
span.spl.spr >
//- TODO: Use .glyphicon-menu-right when we update bootstrap
span
= view.classroom.get('name')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin longLevelName(data)
if data
div.level-name
2016-07-17 03:53:17 -04:00
span(data-i18n="courses.course")
span= ' ' + data.courseNumber + ', '
span(data-i18n="play_level.level")
span= ' ' + data.levelNumber + ': '
2016-03-30 16:57:19 -04:00
span= data.levelName
else
div.level-name(data-i18n='teacher.not_applicable')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin inlineUserList(users)
if users
ul.inline-student-list.small
each student in users
li
//- a(href='TODO')
2016-04-07 17:55:42 -04:00
//- = student.broadName()
2016-03-30 16:57:19 -04:00
span.inline-student-name
2016-04-07 17:55:42 -04:00
= student.broadName()
2016-03-30 16:57:19 -04:00
mixin addStudentsButton
.add-students.text-center
a.add-students-btn.btn.btn-lg.btn-primary(data-classroom-id=view.classroom.id)
span(data-i18n='teacher.add_students_manually')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin studentsTab
2016-04-19 16:44:48 -04:00
#students-tab
2016-03-30 16:57:19 -04:00
+bulkAssignControls
table.students-table
thead
2016-05-31 19:42:25 -04:00
th.checkbox-col.select-all.small.text-center
span(data-i18n="teacher.select_all")
2016-03-30 16:57:19 -04:00
.checkbox-flat
2016-07-07 16:06:15 -04:00
- var allStudentsChecked = _.all(state.get('checkboxStates'))
input(type='checkbox', id='checkbox-all-students', checked=allStudentsChecked)
2016-03-30 16:57:19 -04:00
label.checkmark(for='checkbox-all-students')
th
+sortButtons
tbody
2016-04-19 16:44:48 -04:00
each student in state.get('students').models
2016-03-30 16:57:19 -04:00
+studentRow(student)
mixin sortButtons
.sort-buttons.small
span(data-i18n='teacher.sort_by')
span.spr :
2016-05-09 18:16:54 -04:00
button.sort-button.sort-by-name(data-i18n='general.name', value='name')
button.sort-button.sort-by-progress(data-i18n='teacher.progress', value='progress')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin studentRow(student)
tr.student-row.alternating-background
td.checkbox-col.student-checkbox
.checkbox-flat
2016-07-07 16:06:15 -04:00
input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id, checked=state.get('checkboxStates')[student.id])
2016-03-30 16:57:19 -04:00
label.checkmark(for='checkbox-student-' + student.id)
td.student-info-col
.student-info
2016-03-30 19:20:37 -04:00
if student.get('deleted')
em (deleted)
2016-04-07 17:55:42 -04:00
div.student-name= student.broadName()
2016-03-30 16:57:19 -04:00
div.student-email.small-details= student.get('email')
td.hidden
a.edit-student-button(data-student-id=student.id)
span.glyphicon.glyphicon-edit
span(data-i18n='teacher.edit')
td.latest-level-col.small
div
i
span(data-i18n='teacher.latest_completed')
span :
div
+longLevelName(student.latestCompleteLevel)
td
2016-04-19 16:44:48 -04:00
if state.get('progressData')
2016-07-16 03:31:53 -04:00
- var courses = view.classroom.get('courses').map(function(c) { return view.courses.get(c._id); });
2016-07-17 04:12:58 -04:00
- var courseLabelsArray = view.helper.courseLabelsArray(courses);
2016-04-19 16:44:48 -04:00
each trimCourse, index in view.classroom.get('courses')
- var course = view.courses.get(trimCourse._id);
2016-03-30 16:57:19 -04:00
- var instance = view.courseInstances.findWhere({ courseID: course.id, classroomID: classroom.id })
if instance && instance.hasMember(student)
2016-04-19 16:44:48 -04:00
- var progress = state.get('progressData').get({ classroom: view.classroom, course: course, user: student })
- var levelsTotal = trimCourse.levels.length
//- - var level = ???
2016-07-16 03:31:53 -04:00
- var label = courseLabelsArray[index];
+studentCourseProgressDot(progress, levelsTotal, level, label)
2016-03-30 16:57:19 -04:00
unless student.isEnrolled()
+enrollStudentButton(student)
//- td
//- span.view-class-arrow.glyphicon.glyphicon-chevron-right
2016-03-30 19:20:37 -04:00
td
2016-05-11 17:39:26 -04:00
.pull-right
a.edit-student-link.small.center-block.text-center.m-r-2(data-student-id=student.id)
2016-05-20 17:52:04 -04:00
div.glyphicon.glyphicon-edit
2016-05-11 17:39:26 -04:00
div(data-i18n='teacher.edit')
a.remove-student-link.small.center-block.text-center.m-r-2(data-student-id=student.id)
div.glyphicon.glyphicon-remove
div(data-i18n='teacher.remove')
2016-03-30 16:57:19 -04:00
mixin enrollStudentButton(student)
2016-06-08 09:24:59 -04:00
a.enroll-student-button.btn.btn-lg.btn-primary(data-classroom-id=view.classroom.id data-user-id=student.id data-event-action="Teachers Class Students Enroll Student")
2016-03-30 16:57:19 -04:00
span(data-i18n='teacher.enroll_student')
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin courseProgressTab
2016-04-19 16:44:48 -04:00
#course-progress-tab.m-t-3
2016-03-30 16:57:19 -04:00
if view.courses
.text-center
span(data-i18n='teacher.select_course')
span.spr :
select.course-select
2016-04-13 12:54:24 -04:00
each trimCourse in view.classroom.get('courses')
- var course = view.courses.get(trimCourse._id);
2016-04-19 16:44:48 -04:00
option(value=course.id selected=(course===state.get('selectedCourse')))
2016-03-30 16:57:19 -04:00
= course.get('name')
2016-04-19 16:44:48 -04:00
if state.get('progressData')
2016-03-30 16:57:19 -04:00
.render-on-course-sync
+courseOverview
.student-levels-table
+sortButtons
2016-04-19 16:44:48 -04:00
each student in state.get('students').models
if _.contains(state.get('selectedCourse').members, student.id)
+studentLevelsRow(student)
//- TODO: If any students aren't assigned the course
.unassigned-students.render-on-course-sync
if state.get('selectedCourse') && state.get('selectedCourse').members.length < state.get('students').length
h2
span(data-i18n='TODO')
| Students who have not been assigned
|
span= state.get('selectedCourse').get('name')
for student in state.get('students').models
unless _.contains(state.get('selectedCourse').members, student.id)
.row.unassigned-student-row.alternating-background
.student-name.col-sm-3
= student.broadName()
.student-email.small-details.col-sm-3
= student.get('email')
.col-sm-4
.latest-completed.truncate.small
i.m-r-1
span(data-i18n='TODO')
| Latest completed
| :
+longLevelName(student.latestCompleteLevel)
.col-sm-2
if student.isEnrolled()
.assign-student-button.btn.btn-md.btn-navy.pull-right(data-user-id=student.id data-course-id=state.get('selectedCourse').id)
span(data-i18n='TODO')
| Assign Course
else
2016-06-08 09:24:59 -04:00
.enroll-student-button.btn.btn-md.btn-navy.pull-right(data-user-id=student.id data-event-action="Teachers Class Course Enroll Student")
2016-04-19 16:44:48 -04:00
span(data-i18n='TODO')
| Enroll Student
2016-05-05 12:54:21 -04:00
2016-03-30 16:57:19 -04:00
mixin courseOverview
2016-04-19 16:44:48 -04:00
- var course = state.get('selectedCourse')
2016-06-17 18:15:13 -04:00
- var levels = view.classroom.getLevels({courseID: course.id}).models
2016-03-30 16:57:19 -04:00
.course-overview-row
.course-title.student-name
span= course.get('name')
2016-07-16 00:57:04 -04:00
span= ': '
2016-03-30 16:57:19 -04:00
span(data-i18n='teacher.course_overview')
.course-overview-progress
each level, index in levels
2016-04-19 16:44:48 -04:00
- var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level })
2016-06-26 16:51:14 -04:00
- var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
+allStudentsLevelProgressDot(progress, level, levelNumber)
2016-03-30 16:57:19 -04:00
mixin studentLevelsRow(student)
.student-levels-row.alternating-background
div.student-info
2016-04-07 17:55:42 -04:00
div.student-name= student.broadName()
2016-03-30 19:20:37 -04:00
div.student-email.small-details= student.get('email')
2016-03-30 16:57:19 -04:00
div.student-levels-progress
2016-04-19 16:44:48 -04:00
- var course = state.get('selectedCourse')
2016-06-17 18:15:13 -04:00
- var levels = view.classroom.getLevels({courseID: course.id}).models
2016-03-30 16:57:19 -04:00
each level, index in levels
2016-04-19 16:44:48 -04:00
- var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student })
2016-06-26 16:51:14 -04:00
- var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
2016-07-16 00:57:04 -04:00
+studentLevelProgressDot(progress, level, levelNumber)
2016-04-19 16:44:48 -04:00
mixin studentCourseProgressDot(progress, levelsTotal, level, label)
2016-03-30 16:57:19 -04:00
//- TODO: Refactor with TeacherClassesView jade
//- TODO: Give classes abbreviations instead of using index?
- dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
2016-04-19 16:44:48 -04:00
- _.assign(progress, { levelsTotal: levelsTotal })
.progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentCourseProgressDotTemplate(progress))
2016-03-30 16:57:19 -04:00
+progressDotLabel(label)
2016-04-19 16:44:48 -04:00
mixin allStudentsLevelProgressDot(progress, level, levelNumber)
- dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
2016-07-17 03:53:17 -04:00
- levelName = i18n(level.attributes, 'name')
2016-04-19 16:44:48 -04:00
- context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, numStudents: view.students.length })
.progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.allStudentsLevelProgressDotTemplate(context))
+progressDotLabel(levelNumber)
mixin studentLevelProgressDot(progress, level, levelNumber)
//- TODO: Refactor with TeacherClassesView jade
- dotClass = progress.completed ? 'forest' : (progress.started ? 'gold' : '');
2016-07-17 03:53:17 -04:00
- levelName = i18n(level.attributes, 'name')
2016-06-03 13:18:41 -04:00
- context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment })
2016-04-19 16:44:48 -04:00
.progress-dot.level-progress-dot(class=dotClass, data-html='true', data-title=view.singleStudentLevelProgressDotTemplate(context))
+progressDotLabel(levelNumber)
2016-03-30 16:57:19 -04:00
mixin progressDotLabel(label)
.dot-label.text-center
.dot-label-inner
= label
mixin copyCodes
2016-03-30 19:20:37 -04:00
div.copy-button-group.form-inline.m-b-3
2016-03-30 16:57:19 -04:00
.form-group
2016-04-19 16:44:48 -04:00
input.text-h4.semibold#join-code-input(value=state.get('classCode'))
2016-03-30 16:57:19 -04:00
button#copy-code-btn.form-control.btn.btn-lg.btn-forest
span(data-i18n='teacher.copy_class_code')
div.text-center.small(data-i18n='teacher.class_code_blurb')
2016-05-05 12:54:21 -04:00
2016-03-30 19:20:37 -04:00
div.copy-button-group.form-inline.m-b-3
2016-03-30 16:57:19 -04:00
.form-group
2016-04-19 16:44:48 -04:00
input.form-control.text-h4.semibold#join-url-input(value=state.get('joinURL'))
2016-03-30 16:57:19 -04:00
button#copy-url-btn.form-control.btn.btn-lg.btn-forest
span(data-i18n='teacher.copy_class_url')
div.text-center.small(data-i18n='teacher.class_join_url_blurb')
mixin bulkAssignControls
.bulk-assign-controls.form-inline
2016-04-19 16:44:48 -04:00
.no-students-selected.small-details(class=state.get('errors').assigningToNobody ? 'visible' : '')
2016-04-07 17:55:42 -04:00
span(data-i18n='teacher.no_students_selected')
2016-04-19 16:44:48 -04:00
.cant-assign-to-unenrolled.small-details(class=state.get('errors').assigningToUnenrolled ? 'visible' : '')
2016-04-07 17:55:42 -04:00
span(data-i18n='teacher.cant_assign_to_unenrolled')
2016-03-30 16:57:19 -04:00
span.small
span(data-i18n='teacher.bulk_assign')
span :
select.bulk-course-select.form-control
2016-04-28 14:33:23 -04:00
each trimCourse in _.rest(view.classroom.get('courses'))
2016-04-13 12:54:24 -04:00
- var course = view.courses.get(trimCourse._id)
2016-04-19 16:44:48 -04:00
option(value=course.id selected=(course===state.get('selectedCourse')))
2016-03-30 16:57:19 -04:00
= course.get('name')
button.btn.btn-primary-alt.assign-to-selected-students
span(data-i18n='teacher.assign_to_selected_students')
button.btn.btn-primary-alt.enroll-selected-students
2016-04-19 16:44:48 -04:00
span(data-i18n='teacher.enroll_selected_students')
2016-05-09 18:16:54 -04:00
mixin enrollmentStatusTab
2016-05-23 13:26:34 -04:00
// TODO: Have search input in all tabs
//form.form-inline.text-center.m-t-3
// #search-form-group.form-group
// label(for="student-search") Search for student:
// input#student-search.form-control.m-l-1(type="search")
// span.glyphicon.glyphicon-search.form-control-feedback
2016-05-09 18:16:54 -04:00
2016-05-23 13:26:34 -04:00
table.table#enrollment-status-table.table-condensed.m-t-3
2016-05-09 18:16:54 -04:00
thead
2016-05-23 13:26:34 -04:00
// Checkbox code works, but don't need it yet.
2016-05-09 18:16:54 -04:00
//th.checkbox-col.select-all
.checkbox-flat
input(type='checkbox' id='checkbox-all-students')
label.checkmark(for='checkbox-all-students')
th
.sort-buttons.small
span(data-i18n='teacher.sort_by')
span.spr :
button.sort-button.sort-by-name(data-i18n='general.name', value='name')
button.sort-button.sort-by-status(data-i18n='user.status', value='status')
tbody
- var searchTerm = view.state.get('searchTerm');
each student in state.get('students').search(searchTerm)
- var status = student.prepaidStatus()
tr.student-row.alternating-background
//td.checkbox-col.student-checkbox
.checkbox-flat
input(type='checkbox' id='checkbox-student-' + student.id, data-student-id=student.id)
label.checkmark(for='checkbox-student-' + student.id)
td.student-info-col
.student-info
div.student-name= student.broadName()
div.student-email.small-details= student.get('email')
td.status-col
span(data-i18n='user.status')
span.spr :
strong(class= status === 'expired' ? 'text-danger' : '')= view.studentStatusString(student)
td.enroll-col
if status !== 'enrolled'
2016-06-08 09:24:59 -04:00
button.enroll-student-button.btn.btn-navy(data-i18n="teacher.enroll_student", data-user-id=student.id, data-event-action="Teachers Class Enrollment Enroll Student")
2016-07-14 18:53:54 -04:00
mixin studentProjectsTab
2016-07-16 00:57:04 -04:00
#student-projects-tab.m-t-3
if state.get('progressData')
.render-on-course-sync
.student-levels-table
+sortButtons
each student in state.get('students').models
+studentProjectsRow(student)
mixin studentProjectsRow(student)
.row.student-levels-row.alternating-background
div.student-info.col-sm-3
div.student-name= student.broadName()
div.student-email.small-details= student.get('email')
div.student-levels-progress.col-sm-9
each trimCourse in view.classroom.get('courses')
- var course = view.courses.get(trimCourse._id);
- var levels = view.classroom.getLevels({courseID: course.id, projectLevels: true}).models
each level in levels
- var progress = state.get('progressData').get({ classroom: view.classroom, course: course, level: level, user: student })
- var levelNumber = view.classroom.getLevelNumber(level.get('original'), index + 1)
+studentProjectLink(progress, level, levelNumber, course)
mixin studentProjectLink(progress, level, levelNumber, course)
- var colorClass = progress.completed ? 'btn-primary' : (progress.started ? 'btn-warning' : 'btn-primary');
2016-07-17 03:53:17 -04:00
- var levelName = i18n(level.attributes, 'name')
2016-07-16 00:57:04 -04:00
- var context = _.merge(progress, { levelName: levelName, levelNumber: levelNumber, moment: moment })
- var title = view.singleStudentLevelProgressDotTemplate(context);
if context.session
- var url = '/play/' + level.get('type') + '-level/' + level.get('slug') + '/' + context.session.id + '?course=' + course.id;
a(class="btn btn-lg btn-view-project-level " + colorClass, href=url, data-title=title)= levelName
else
btn(class="btn btn-lg btn-view-project-level " + colorClass, data-title=title, disabled=true)= levelName