Skip to content

E
edx-ora2
Commit 7e476f4f by ssemenova
Options

ORA expanding/collapsing steps accessibility 

TNL-4001
parent 558ff91d
Showing with 890 additions and 625 deletions
openassessment/templates/openassessmentblock/edit/oa_edit.html
......@@ -18,13 +18,13 @@
</div>
<div id="openassessment_validation_alert" class="covered">
<i class="openassessment_alert_icon"></i>
<span class="openassessment_alert_icon" aria-hidden="true"></span>
<div class="openassessment_alert_header">
<h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
<p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix the areas highlighted in red." %}</p>
</div>
<a href="" rel="view" class="action openassessment_alert_close">
<i class="icon fa fa-times-circle" aria-hidden="true"></i>
<span class="icon fa fa-times-circle" aria-hidden="true"></span>
<span class="label is--hidden">{% trans "close alert" %}</span>
</a>
</div>
......
openassessment/templates/openassessmentblock/grade/oa_assessment_title.html
......@@ -23,9 +23,9 @@
{% if assessment.option.explanation %}
<span class="ui-hint hint--top" data-hint="{{ assessment.option.explanation }}">
<i class="icon fa fa-info-circle" aria-hidden="true"
<span class="icon fa fa-info-circle" aria-hidden="true"
title="{% blocktrans with name=assessment.option.label %}More information about {{ name }}{% endblocktrans %}">
</i>
</span>
</span>
{% endif %}
......
openassessment/templates/openassessmentblock/grade/oa_grade_cancelled.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade has--error">
<header class="step__header ui-toggle-visibility__control">
<li id="openassessment__grade" class="openassessment__steps__step step--grade has--error ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% if score %}
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
{% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
{{ points_earned }} out of {{ points_possible }}
{% endblocktrans %}
{% endwith %}
{% else %}
<!--When submission is cancelled right after the response submitted, the score would be 0.-->
0
{% endif %}
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% if score %}
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
{% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
{{ points_earned }} out of {{ points_possible }}
{% endblocktrans %}
{% endwith %}
{% else %}
<!--When submission is cancelled right after the response submitted, the score would be 0.-->
0
{% endif %}
</span>
</span>
</span>
</span>
</button>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" id="oa_grade_{{ xblock_id }}_content" aria-labelledby="oa_grade_{{ xblock_id }}">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete has--grade {% if allow_latex %}allow--latex{% endif %}">
<header class="step__header ui-toggle-visibility__control">
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete is--showing has--grade ui-slidable__container {% if allow_latex %}allow--latex{% endif %}" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
{% if score %}
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
{% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
{{ points_earned }} out of {{ points_possible }}
{% endblocktrans %}
{% endwith %}
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="wrapper--copy">
{% if score %}
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
{% blocktrans with points_earned='<span class="grade__value__earned">'|safe|add:points_earned_string|add:'</span>'|safe points_possible='<span class="grade__value__potential">'|safe|add:points_possible_string|add:'</span>'|safe %}
{{ points_earned }} out of {{ points_possible }}
{% endblocktrans %}
{% endwith %}
</span>
</span>
{% else %}
<span class="step__label">{% trans "Your Grade" %}</span>
{% endif %}
</span>
</span>
{% else %}
<span class="step__label">{% trans "Your Grade" %}</span>
{% endif %}
</span>
</button>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" id="oa_grade_{{ xblock_id }}_content" aria-labelledby="oa_grade_{{ xblock_id }}">
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display step__content__section">
......@@ -41,11 +43,12 @@
<ol class="list submission__peer-evaluations__questions">
{% for criterion in grade_details.criteria %}
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span class="question__title__copy">{{ criterion.label }}</span>
<li class="question question--{{ criterion_num }} ui-slidable__container is--showing">
<h4 class="question__title ui-slidable__control">
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}_criteria_{{ criterion_num }}" aria-controls="oa_grade_{{ xblock_id }}_criteria_{{ criterion_num }}_content">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span class="question__title__copy">{{ criterion.label }}</span>
</button>
{% if criterion.total_value > 0 %}
<span class="question__score">
<span class="label sr">{% trans "Overall Grade" %}</span>
......@@ -60,7 +63,7 @@
</h4>
{% if criterion.options %}
<ul class="question__answers ui-toggle-visibility__content has--hints">
<ul class="question__answers ui-slidable__content has--hints" aria-labelledby="oa_grade_{{ xblock_id }}_criteria_{{ criterion_num }}" id="oa_grade_{{ xblock_id }}_criteria_{{ criterion_num }}_content">
{% for assessment in criterion.assessments %}
{% include "openassessmentblock/grade/oa_assessment_title.html" with assessment=assessment %}
{% endfor %}
......@@ -68,7 +71,7 @@
{% endif %}
{% if criterion.has_feedback %}
<ul class="question__answers ui-toggle-visibility__content has--hints">
<ul class="question__answers ui-slidable__content has--hints">
{% for assessment in criterion.assessments %}
{% include "openassessmentblock/grade/oa_assessment_feedback.html" with title=assessment.feedback_title assessment=assessment %}
{% endfor %}
......@@ -78,13 +81,15 @@
{% endwith %}
{% endfor %}
{% if grade_details.additional_feedback %}
<li class="question question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span class="question__title__copy">{% trans "Additional comments on your response" %}</span>
<li class="question question--feedback ui-slidable__container is--showing">
<h4 class="question__title ui-slidable__control">
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}_feedback" aria-controls="oa_grade_{{ xblock_id }}_feedback_content">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span class="question__title__copy">{% trans "Additional comments on your response" %}</span>
</button>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
<ul class="question__answers ui-slidable__content" id="oa_grade_{{ xblock_id }}_feedback_content" aria-labelledby="oa_grade_{{ xblock_id }}_feedback_content">
{% for feedback in grade_details.additional_feedback %}
{% include "openassessmentblock/grade/oa_assessment_feedback.html" with title=feedback.title assessment=feedback %}
{% endfor %}
......@@ -95,18 +100,19 @@
</article>
{% if peer_assessments %}
<form id="submission__feedback" class="submission__feedback ui-toggle-visibility step__content__section is--collapsed" method="post">
<h3 class="submission__feedback__title ui-toggle-visibility__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span class="submission__feedback__title__copy">{% trans "Provide Feedback on Peer Assessments" %}</span>
<form id="submission__feedback" class="submission__feedback step__content__section ui-slidable__container" method="post">
<h3 class="submission__feedback__title ui-slidable__control">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_feedback_{{ xblock_id }}" aria-controls="oa_grade_feedback_{{ xblock_id }}__content">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span class="submission__feedback__title__copy">{% trans "Provide Feedback on Peer Assessments" %}</span>
</button>
</h3>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_grade_feedback_{{ xblock_id }}" id="oa_grade_feedback_{{ xblock_id }}__content">
<div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim">
<i class="icon fa fa-spinner fa-spin" aria-hidden="true"></i>
<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
<span class="copy">{% trans "Submitting Feedback" %}</span>
</span>
</span>
......@@ -180,7 +186,7 @@
<div class="submission__feedback__actions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your feedback" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade">
<header class="step__header ui-toggle-visibility__control">
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unfinished ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Completed" %}</span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Completed" %}</span>
</span>
</span>
</span>
</button>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted">
<header class="step__header ui-toggle-visibility__control">
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Started" %}</span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Started" %}</span>
</span>
</span>
</span>
</button>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
......
openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade">
<header class="step__header ui-toggle-visibility__control">
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--showing {{ is_waiting_staff }} ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Waiting for Assessments" %}</span>
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Waiting for Assessments" %}</span>
</span>
</span>
</span>
</button>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
......
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_show.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard is--complete {% if allow_latex %} allow--latex{% endif %}">
<header class="step__header">
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard is--complete ui-slidable__container is--showing {% if allow_latex %} allow--latex{% endif %}" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
<div class="wrapper--step__content">
<h3 class="leaderboard__title">{% trans "Top-Scoring Responses for This Assignment" %}</h3>
<ol class="list leaderboard__score__list">
{% for topscore in topscores %}
<li class="leaderboard__score__item">
<h4 class="leaderboard__list__number">{{ forloop.counter }}</h4>
{% with num_points=topscore.score %}
<h4 class="leaderboard__score__title">
{% blocktrans %}{{ num_points }} points{% endblocktrans %}
</h4>
{% endwith %}
<div class="leaderboard__answer">
{% trans "Your peer's response to the question above:" as translated_label %}
{% include "openassessmentblock/oa_submission_answer.html" with answer=topscore.submission.answer answer_text_label=translated_label %}
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=topscore.file class_prefix="submission__answer"%}
</div>
</li>
{% endfor %}
</ol>
</div>
</span>
<button class="ui-slidable" aria-expanded="true" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
</span>
</button>
</h2>
</header>
<div class="wrapper--step__content ui-slidable__content" aria-labelledby="oa_leaderboard_{{ xblock_id }}" id="oa_leaderboard_{{ xblock_id }}_content">
<h3 class="leaderboard__title">{% trans "Top-Scoring Responses for This Assignment" %}</h3>
<ol class="list leaderboard__score__list">
{% for topscore in topscores %}
<li class="leaderboard__score__item">
<h4 class="leaderboard__list__number">{{ forloop.counter }}</h4>
{% with num_points=topscore.score %}
<h4 class="leaderboard__score__title">
{% blocktrans %}{{ num_points }} points{% endblocktrans %}
</h4>
{% endwith %}
<div class="leaderboard__answer">
{% trans "Your peer's response to the question above:" as translated_label %}
{% include "openassessmentblock/oa_submission_answer.html" with answer=topscore.submission.answer answer_text_label=translated_label %}
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=topscore.file class_prefix="submission__answer"%}
</div>
</li>
{% endfor %}
</ol>
</div>
</li>
{% endspaceless %}
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_waiting.html
{% load i18n %}
{% spaceless %}
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard">
<header class="step__header">
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
</span>
<button class="ui-slidable" aria-expanded="false" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
</span>
</button>
</h2>
</header>
<div class="wrapper--step__content">
<div class="wrapper--step__content ui-slidable__content" aria-labelledby="oa_leaderboard_{{ xblock_id }}" id="oa_leaderboard_{{ xblock_id }}_content">
<div class="step__content">
<div class="leaderboard__description">
<p>{% trans "After you complete all the steps of this assignment, you can see the top-scoring responses from your peers." %}</p>
......
openassessment/templates/openassessmentblock/oa_base.html
......@@ -24,16 +24,15 @@
<span class="wrapper--copy">
<span class="step__label">{% trans assessment.title %}</span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span>
<span class="step__status__value">
<i class="icon fa fa-spinner fa-spin" aria-hidden="true"></i>
<span class="copy">{% trans "Loading" %}</span>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span>
<span class="step__status__value">
<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
<span class="copy">{% trans "Loading" %}</span>
</span>
</span>
</span>
</h2>
</header>
</li>
{% endfor %}
......
openassessment/templates/openassessmentblock/oa_rubric.html
......@@ -5,16 +5,18 @@
{% for criterion in rubric_criteria %}
<li
class="field field--radio is--required assessment__rubric__question ui-toggle-visibility {% if criterion.options %}has--options{% endif %}"
class="field field--radio is--required assessment__rubric__question is--showing ui-slidable__container {% if criterion.options %}has--options{% endif %}"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
>
<h4 class="question__title ui-toggle-visibility__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
<h4 class="question__title ui-slidable__control">
<button class="ui-slidable" aria-expanded="true" id="oa_rubric_{{ submission.uuid }}" aria-controls="oa_rubric_{{ submission.uuid }}_content">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-slidable__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</button>
</h4>
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_rubric_{{ submission.uuid }}" id="oa_rubric_{{ submission.uuid }}_content">
<div class="question__answers">
<div role="group" aria-labelledby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}">
{% for option in criterion.options %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -3,49 +3,54 @@
{% block list_item %}
<li
id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility {% if allow_latex %} allow--latex {%endif%}"
class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container {% if allow_latex %} allow--latex {%endif%}"
data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
>
{% endblock %}
{% spaceless %}
<header class="step__header ui-toggle-visibility__control">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Peers" %}</span>
{% if peer_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=peer_start|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer{{ xblock_id }}_content">
{% endblock %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Peers" %}</span>
{% if peer_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=peer_start|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif peer_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=peer_due|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span>
{% elif peer_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=peer_due|timezone:time_zone|date:"N j, Y H:i e" time_until=peer_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</button>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ num_graded }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span>
{% endif %}
</span>
</span>
{% endblock %}
</h2>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ num_graded }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span>
</span>
</span>
{% endblock %}
</header>
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__instruction">
<p>{% trans "Read and assess the following response from one of your peers." %}</p>
......@@ -82,7 +87,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html
......@@ -4,14 +4,18 @@
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">
{% trans "Cancelled" %}
</span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -2,7 +2,11 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility">
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--showing is--incomplete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
......@@ -10,7 +14,7 @@
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
Incomplete ({{ num_graded }} of {{ num_must_grade }})
......@@ -22,7 +26,7 @@
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">{% trans "The Due Date for This Step Has Passed" %}</h3>
......
openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -2,14 +2,14 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--empty is--complete is--collapsed">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> {% trans "Completed" %}
</span>
......@@ -17,8 +17,12 @@
</span>
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
......@@ -27,7 +31,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not retrieve additional submissions for assessment" %}</h3>
</div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -4,16 +4,22 @@
{% block list_item %}
<li
id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete"
class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container"
data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
>
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
......@@ -26,7 +32,7 @@
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
......@@ -66,7 +72,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
</div>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
......@@ -2,14 +2,18 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing is--complete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
......@@ -22,7 +26,7 @@
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
......
openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
......@@ -2,7 +2,12 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
......@@ -2,7 +2,12 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
......@@ -21,7 +26,7 @@
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_peer_{{ xblock_id }}" id="oa_peer_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -2,40 +2,45 @@
{% load i18n %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<li id="openassessment__response"
class="openassessment__steps__step step--response is--showing ui-slidable__container"
tabindex="-1">
{% endblock %}
<header class="step__header ui-toggle-visibility__control">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Response" %}</span>
{% if submission_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=submission_start|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Response" %}</span>
{% if submission_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=submission_start|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif submission_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=submission_due|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
{% endif %}
</span>
{% elif submission_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=submission_due|timezone:time_zone|date:"N j, Y H:i e" time_until=submission_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</button>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
{% endif %}
</span>
{% endblock %}
</h2>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
</header>
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__instruction">
<p>
......@@ -54,10 +59,10 @@
<ol class="list list--fields response__submission__content">
{% for part in saved_response.answer.parts %}
<li class="submission__answer__part">
<article class="submission__answer__part__prompt ui-toggle-visibility">
<article class="submission__answer__part__prompt">
<h2 class="submission__answer__part__prompt__title">{% trans "The prompt for this section." %}</h2>
<div class="submission__answer__part__prompt__copy ui-toggle-visibility__content">
<div class="submission__answer__part__prompt__copy">
{{ part.prompt.description|linebreaks }}
</div>
</article>
......@@ -75,7 +80,7 @@
{% if file_upload_type %}
<li class="field">
<div id="upload__error">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not upload this file" %}</h3>
<div class="message__content"></div>
</div>
......@@ -92,7 +97,7 @@
<span class="tip">{% trans "You may continue to work on your response until you submit it." %}</span>
<div class="response__submission__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not save your progress" %}</h3>
<div class="message__content"></div>
</div>
......@@ -132,7 +137,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your response" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/response/oa_response_cancelled.html
......@@ -3,21 +3,23 @@
{% load tz %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility has--error">
<li id="openassessment__response"
class="openassessment__steps__step step--response has--error ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Cancelled" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% load i18n %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
<li id="openassessment__response"
class="openassessment__steps__step step--response is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -2,21 +2,27 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}">
<li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
......
openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -2,21 +2,27 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed {% if allow_latex %}allow--latex{%endif%}">
<li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_response_{{ xblock_id }}" id="oa_response_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
......
openassessment/templates/openassessmentblock/response/oa_response_unavailable.html
......@@ -2,7 +2,13 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--empty is--unavailable is--collapsed">
<li id="openassessment__response"
class="openassessment__steps__step step--response is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -2,40 +2,46 @@
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
<li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
<header class="step__header ui-toggle-visibility__control">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Your Response" %}</span>
{% if self_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=self_start|timezone:time_zone|date:"N j, Y H:i e" time_until=self_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
{% endblock %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Your Response" %}</span>
{% if self_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=self_start|timezone:time_zone|date:"N j, Y H:i e" time_until=self_start|timeuntil %}available <span class="date">{{ start_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% elif self_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:time_zone|date:"N j, Y H:i e" time_until=self_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span>
{% elif self_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:time_zone|date:"N j, Y H:i e" time_until=self_due|timeuntil %}due <span class="date">{{ due_date }} (in {{ time_until }})</span>{% endblocktrans %}
</span>
{% endif %}
</span>
</h2>
</button>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
</h2>
</header>
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_self_{{ xblock_id }}" id="oa_self_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__content">
<article class="self-assessment__display" id="self-assessment">
......@@ -56,7 +62,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/self/oa_self_cancelled.html
......@@ -4,14 +4,20 @@
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
<li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">
{% trans "Cancelled" %}
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -2,21 +2,27 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
<li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--showing is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_self_{{ xblock_id }}" id="oa_self_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -2,14 +2,20 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed">
<li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
......@@ -2,7 +2,13 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed">
<li id="openassessment__self-assessment"
class="openassessment__steps__step step--self-assessment is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
......
openassessment/templates/openassessmentblock/staff/oa_staff_grade.html
{% load i18n %}
<li id="openassessment__staff-assessment" class="openassessment__steps__step step--staff-assessment {{ step_classes }}">
<header class="step__header">
<li id="openassessment__staff-assessment" class="openassessment__steps__step step--staff-assessment ui-slidable__container {{ step_classes }}" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Staff Grade" %} </span>
<button class="ui-slidable" {{ button_active }}
{% if message_title %}
id="oa_staff_grade_{{ xblock_id }}" aria-controls="oa_staff_grade_{{ xblock_id }}_content"
{% endif %}
>
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Staff Grade" %} </span>
</span>
</button>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
{% if icon_class %}
<span class="icon fa {{ icon_class }}" aria-hidden="true"></span>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
{% if icon_class %}
<i class="icon fa {{ icon_class }}" aria-hidden="true"></i>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span>
</header>
{% if message_title %}
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">{{ message_title }}</h3>
<div class="ui-slidable__content" aria-labelledby="oa_staff_grade_{{ xblock_id }}" id="oa_staff_grade_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">{{ message_title }}</h3>
<div class="message__content">
<p>{{ message_content }}</p>
<div class="message__content">
<p>{{ message_content }}</p>
</div>
</div>
</div>
</div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html
......@@ -12,7 +12,7 @@
<div class="openassessment__staff-tools wrapper--staff-tools wrapper--ui-staff">
<div class="staff-info ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-info__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "Manage Individual Learners" %}</span>
</h2>
......@@ -84,7 +84,7 @@
<div class="openassessment__staff-info wrapper--staff-info wrapper--ui-staff">
<div class="staff-info ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-info__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "View Assignment Statistics" %}</span>
</h2>
......@@ -166,7 +166,7 @@
{% if staff_assessment_required %}
<div class="openassessment__staff-grading wrapper--staff-grading wrapper--ui-staff">
<div class="staff-grading ui-staff">
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
<button class="ui-staff_close_button ui-staff__title"><span class="sr">{% trans "Close" %}</span> <span class="icon fa fa-close" aria-hidden="true"></span></button>
<h2 class="staff-grading__title ui-staff__title">
<span class="staff-info__title__copy">{% trans "Grade Available Responses" %}</span>
</h2>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html
{% load i18n %}
<div class="staff__grade__control">
<div class="staff__grade__control ui-slidable__container">
<header class="staff__grade__header ui-slidable__control">
<h3 class="staff__grade__title">
<span class="wrapper--copy">
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners_assessment.html
......@@ -36,7 +36,7 @@
</div>
<div>
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h4 class="message__title">{% trans "We could not submit your assessment" %}</h4>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html
......@@ -35,7 +35,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/staff_area/oa_student_info.html
......@@ -12,13 +12,15 @@
</span>
</h2>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response">
<button class="ui-staff ui-slidable" aria-controls="learner_response_content_{{ submission.uuid }}" aria-expanded="false" id="learner_response_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span>{% trans "Learner's Response" %}</span>
</h2>
</button>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response ui-slidable__container">
<div class="ui-slidable__control">
<button class="ui-staff ui-slidable" aria-controls="learner_response_content_{{ submission.uuid }}" aria-expanded="false" id="learner_response_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span>{% trans "Learner's Response" %}</span>
</h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="learner_response_content_{{ submission.uuid }}" aria-labelledby="learner_response_{{ submission.uuid }}">
{% if workflow_cancellation %}
<p>
......@@ -75,13 +77,15 @@
{% include "openassessmentblock/staff_area/oa_student_info_assessment_detail.html" with class_type="staff" assessments=staff_assessment %}
{% endif %}
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade">
<button class="ui-staff ui-slidable" aria-controls="final_grade_content_{{ submission.uuid }}" aria-expanded="false" id="final_grade_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span>{% trans "Learner's Final Grade" %}</span>
</h2>
</button>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade ui-slidable__container">
<div class="ui-slidable__control">
<button class="ui-staff ui-slidable" aria-controls="final_grade_content_{{ submission.uuid }}" aria-expanded="false" id="final_grade_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span>{% trans "Learner's Final Grade" %}</span>
</h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="final_grade_content_{{ submission.uuid }}" aria-labelledby="final_grade_{{ submission.uuid }}">
{% if workflow_status == "done" %}
{% if score != None %}
......@@ -151,13 +155,15 @@
</div>
{% if not workflow_cancellation %}
<div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse">
<button class="ui-staff ui-slidable" aria-controls="grade_override_content_{{ submission.uuid }}" aria-expanded="false" id="grade_override_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span>{% trans "Submit Assessment Grade Override" %}</span>
</h2>
</button>
<div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<div class="ui-slidable__control">
<button class="ui-staff ui-slidable" aria-controls="grade_override_content_{{ submission.uuid }}" aria-expanded="false" id="grade_override_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span>{% trans "Submit Assessment Grade Override" %}</span>
</h2>
</button>
</div>
<div class="staff-info__staff-override__content ui-slidable__content" role="group" id="grade_override_content_{{ submission.uuid }}" aria-labelledby="grade_override_{{ submission.uuid }}">
<div class="wrapper--input">
{% include "openassessmentblock/staff_area/oa_staff_override_assessment.html" %}
......@@ -165,13 +171,15 @@
</div>
</div>
<div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse">
<button class="ui-staff ui-slidable" aria-controls="remove_submission_content_{{ submission.uuid }}" aria-expanded="false" id="remove_submission_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span>{% trans "Remove Submission From Peer Grading" %}</span>
</h2>
</button>
<div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<div class="ui-slidable__control">
<button class="ui-staff ui-slidable" aria-controls="remove_submission_content_{{ submission.uuid }}" aria-expanded="false" id="remove_submission_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span>{% trans "Remove Submission From Peer Grading" %}</span>
</h2>
</button>
</div>
<div class="staff-info__cancel-submission__content ui-slidable__content" role="group" id="remove_submission_content_{{ submission.uuid }}" aria-labelledby="remove_submission_{{ submission.uuid }}">
<div class="wrapper--input">
<form data-submission-uuid="{{ submission.uuid }}">
......
openassessment/templates/openassessmentblock/staff_area/oa_student_info_assessment_detail.html
{% load i18n %}
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments">
<button class="ui-staff ui-slidable" aria-controls="{{ class_type }}_content_{{ submission.uuid }}" aria-expanded="false" id="{{ class_type }}_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span>{{ translated_title }}</span>
</h2>
</button>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments ui-slidable__container">
<div class="ui-slidable__control">
<button class="ui-staff ui-slidable" aria-controls="{{ class_type }}_content_{{ submission.uuid }}" aria-expanded="false" id="{{ class_type }}_{{ submission.uuid }}">
<h2 class="staff-info__title ui-staff__subtitle">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span>{{ translated_title }}</span>
</h2>
</button>
</div>
<div class="ui-slidable__content" role="group" id="{{ class_type }}_content_{{ submission.uuid }}" aria-labelledby="{{ class_type }}_{{ submission.uuid }}">
{% for assessment in assessments %}
{% with assessment_num=forloop.counter %}
......
openassessment/templates/openassessmentblock/student_training/student_training.html
......@@ -2,11 +2,16 @@
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training ui-toggle-visibility {% if allow_latex %}allow--latex{%endif%}">
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
<header class="step__header ui-toggle-visibility__control">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Learn to Assess Responses" %}</span>
......@@ -23,23 +28,24 @@
</span>
{% endif %}
</span>
</h2>
</button>
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}
(<span class="step__status__value--completed">{{ training_num_completed }}</span> of
<span class="step__status__value--required">{{ training_num_available }}</span>)
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}
(<span class="step__status__value--completed">{{ training_num_completed }}</span> of
<span class="step__status__value--required">{{ training_num_available }}</span>)
</span>
</span>
</span>
</span>
{% endblock %}
</span>
{% endblock %}
</h2>
</header>
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div id="openassessment__student-training--instructions" class="step__message message message--correct">
......@@ -83,23 +89,25 @@
{% for criterion in training_rubric.criteria %}
{% if criterion.options %}
<li
class="field field--radio is--required assessment__rubric__question ui-toggle-visibility has--options"
class="field field--radio is--required assessment__rubric__question has--options is--showing ui-slidable__container"
id="training__assessment__rubric__question--{{ criterion.order_num }}"
>
<h4 class="question__title ui-toggle-visibility__control">
<i class="icon fa fa-caret-right" aria-hidden="true"></i>
<span id="training__assessment__rubric__prompt--{{ criterion.order_num }}" class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
<h4 class="question__title ui-slidable__control">
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" aria-controls="oa_training_{{ xblock_id }}_content_criterion--{{ criterion.order_num }}">
<span class="icon fa fa-caret-right" aria-hidden="true"></span>
<span id="training__assessment__rubric__prompt--{{ criterion.order_num }}" class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</button>
</h4>
<div class="ui-toggle-visibility__content">
<div class="step__message message message--correct ui-toggle-visibility is--hidden">
<div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" id="oa_training_{{ xblock_id }}_content_criterion--{{ criterion.order_num }}">
<div class="step__message message message--correct is--hidden">
<h3 class="message__title">{% trans "Selected Options Agree" %}</h3>
<div class="message__content">
<p>{% trans "The option you selected is the option that the instructor selected." %}</p>
</div>
</div>
<div class="step__message message message--incorrect ui-toggle-visibility is--hidden">
<div class="step__message message message--incorrect is--hidden">
<h3 class="message__title">{% trans "Selected Options Differ" %}</h3>
<div class="message__content">
......@@ -138,7 +146,7 @@
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<div class="message message--inline message--error message--error-server" tabindex="-1">
<h3 class="message__title">{% trans "We could not check your assessment" %}</h3>
<div class="message__content"></div>
</div>
......
openassessment/templates/openassessmentblock/student_training/student_training_cancelled.html
......@@ -3,14 +3,20 @@
{% load tz %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training">
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Cancelled" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_closed.html
......@@ -2,21 +2,27 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--incomplete ui-toggle-visibility">
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing is--incomplete ui-slidable__container
tabindex="-1"">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/student_training/student_training_complete.html
......@@ -2,14 +2,20 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--complete is--empty is--collapsed">
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="icon fa fa-check" aria-hidden="true"></i>
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_error.html
{% extends "openassessmentblock/student_training/student_training.html" %}
{% load i18n %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}" id="oa_training_{{ xblock_id }}_content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
......
openassessment/templates/openassessmentblock/student_training/student_training_unavailable.html
......@@ -2,7 +2,13 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training" class="openassessment__steps__step step--student-training is--empty is--unavailable is--collapsed">
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled">
{% endblock %}
{% block title %}
......
openassessment/xblock/grade_mixin.py
......@@ -49,17 +49,24 @@ class GradeMixin(object):
status = workflow.get('status')
# Default context is empty
context = {}
context = {'xblock_id': self.get_xblock_id()}
assessment_steps = self.assessment_steps
# Render the grading section based on the status of the workflow
try:
if status == "cancelled":
path = 'openassessmentblock/grade/oa_grade_cancelled.html'
context = {'score': workflow['score']}
context['score'] = workflow['score']
elif status == "done":
path, context = self.render_grade_complete(workflow)
elif status == "waiting":
path, context = 'openassessmentblock/grade/oa_grade_waiting.html', {}
# The class "is--waiting--staff" is needed in the grade template for the javascript to
# send focus to the correct step.
# In the case where the user has completed all steps but is still waiting on a staff grade,
# we want focus to go from the assessment steps to the staff grading step.
if "staff-assessment" in assessment_steps:
context['is_waiting_staff'] = "is--waiting--staff"
path, context = 'openassessmentblock/grade/oa_grade_waiting.html', context
elif status is None:
path = 'openassessmentblock/grade/oa_grade_not_started.html'
else: # status is 'self' or 'peer', which implies that the workflow is incomplete
......@@ -139,7 +146,8 @@ class GradeMixin(object):
),
'file_upload_type': self.file_upload_type,
'allow_latex': self.allow_latex,
'file_url': self.get_download_url_from_submission(student_submission)
'file_url': self.get_download_url_from_submission(student_submission),
'xblock_id': self.get_xblock_id()
}
return ('openassessmentblock/grade/oa_grade_complete.html', context)
......@@ -168,7 +176,7 @@ class GradeMixin(object):
return (
'openassessmentblock/grade/oa_grade_incomplete.html',
{'incomplete_steps': incomplete_steps}
{'incomplete_steps': incomplete_steps, 'xblock_id': self.get_xblock_id()}
)
@XBlock.json_handler
......
openassessment/xblock/leaderboard_mixin.py
......@@ -86,7 +86,10 @@ class LeaderboardMixin(object):
score.pop('content', None)
context = {'topscores': scores, 'allow_latex': self.allow_latex, 'file_upload_type': self.file_upload_type,}
context = {'topscores': scores,
'allow_latex': self.allow_latex,
'file_upload_type': self.file_upload_type,
'xblock_id': self.get_xblock_id()}
return 'openassessmentblock/leaderboard/oa_leaderboard_show.html', context
......@@ -97,4 +100,4 @@ class LeaderboardMixin(object):
Returns:
template_path (string), tuple of context (dict)
"""
return 'openassessmentblock/leaderboard/oa_leaderboard_waiting.html', {}
return 'openassessmentblock/leaderboard/oa_leaderboard_waiting.html', {'xblock_id': self.get_xblock_id()}
openassessment/xblock/openassessmentblock.py
......@@ -990,3 +990,9 @@ class OpenAssessmentBlock(
return effective
return start
def get_xblock_id(self):
"""
Returns the xblock id
"""
return self._serialize_opaque_key(self.scope_ids.usage_id)
openassessment/xblock/peer_assessment_mixin.py
......@@ -167,6 +167,7 @@ class PeerAssessmentMixin(object):
"rubric_criteria": self.rubric_criteria_with_labels,
"allow_latex": self.allow_latex,
"time_zone": get_current_time_zone(user_service),
"xblock_id": self.get_xblock_id(),
}
if self.rubric_feedback_prompt is not None:
......
openassessment/xblock/self_assessment_mixin.py
......@@ -51,12 +51,14 @@ class SelfAssessmentMixin(object):
SubmissionError: Error occurred while retrieving the current submission.
SelfAssessmentRequestError: Error occurred while checking if we had a self-assessment.
"""
path = 'openassessmentblock/self/oa_self_unavailable.html'
problem_closed, reason, start_date, due_date = self.is_closed(step="self-assessment")
user_service = self.runtime.service(self, 'user')
context = {
'allow_latex': self.allow_latex,
"xblock_id": self.get_xblock_id(),
'time_zone': get_current_time_zone(user_service)
}
......
openassessment/xblock/staff_assessment_mixin.py
"""
"""""
A mixin for staff grading.
"""
import logging
......@@ -96,19 +96,23 @@ class StaffAssessmentMixin(object):
path = 'openassessmentblock/staff/oa_staff_grade.html'
not_available_context = {
'status_value': self._('Not Available'),
'step_classes': 'is--unavailable is--empty is--collapsed',
'button_active': 'disabled=disabled aria-expanded=false',
'step_classes': 'is--unavailable',
}
if status == 'cancelled':
context = {
'status_value': self._('Cancelled'),
'icon_class': 'fa-exclamation-triangle',
'step_classes': 'is--unavailable',
'button_active': 'disabled=disabled aria-expanded=false',
}
elif status == 'done': # Staff grade exists and all steps completed.
context = {
'status_value': self._('Complete'),
'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed',
'step_classes': 'is--complete is--empty',
'button_active': 'disabled=disabled aria-expanded=false',
}
elif status == 'waiting':
# If we are in the 'waiting' workflow, this means that a staff grade cannot exist
......@@ -118,6 +122,8 @@ class StaffAssessmentMixin(object):
'status_value': self._('Not Available'),
'message_title': self._('Waiting for a Staff Grade'),
'message_content': self._('Check back later to see if a course staff member has assessed your response. You will receive your grade after the assessment is complete.'),
'step_classes': 'is--showing',
'button_active': 'aria-expanded=true',
}
elif status is None: # not started
context = not_available_context
......@@ -128,8 +134,10 @@ class StaffAssessmentMixin(object):
'icon_class': 'fa-check',
'message_title': self._('You Must Complete the Steps Above to View Your Grade'),
'message_content': self._('Although a course staff member has assessed your response, you will receive your grade only after you have completed all the required steps of this problem.'),
'button_active': 'aria-expanded=false',
}
else: # Both student and staff still have work to do, just show "Not Available".
context = not_available_context
context['xblock_id'] = self.get_xblock_id()
return path, context
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/openassessment-lms.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/openassessment-studio.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/spec/lms/oa_base.js
......@@ -81,4 +81,20 @@ describe("OpenAssessment.BaseView", function() {
// and again after the peer has been assessed.
expect(numPeerLoads).toBe(2);
});
it("Steps should have aria-controls and be visible by default", function() {
$(".ui-slidable__container", view.element).each(function() {
var step = this;
var $content = $('.ui-slidable__content', step),
$button = $('.ui-slidable', step)[0];
expect($button).toHaveAttr('aria-controls', $content.id);
expect($content).toHaveAttr('aria-labelledby', $button.id);
if($(step).hasClass('is--showing')) {
expect($button).toHaveAttr('aria-expanded', 'true');
expect(step).toHaveClass('is--showing');
};
});
});
});
openassessment/xblock/static/js/spec/lms/oa_staff_area.js
......@@ -409,20 +409,21 @@ describe('OpenAssessment.StaffAreaView', function() {
it('updates aria-expanded when toggling slidable sections', function() {
var staffArea = createStaffArea(), $slidableControls;
chooseStudent(staffArea, 'testStudent');
$slidableControls = $('.ui-slidable', staffArea.element);
$slidableControls = $('.ui-staff.ui-slidable', staffArea.element);
expect($slidableControls.length).toBe(5);
expect($slidableControls).toHaveAttr('aria-expanded', 'false');
$slidableControls.click();
$slidableControls[0].click();
expect($slidableControls).toHaveAttr('aria-expanded', 'true');
});
it('links slidable controls with content', function() {
var staffArea = createStaffArea();
chooseStudent(staffArea, 'testStudent');
$('.ui-slidable', staffArea.element).each(function(index, slidable) {
var content = $(slidable).next('.ui-slidable__content');
expect(content).toHaveAttr('aria-labelledby', slidable.id);
expect(slidable).toHaveAttr('aria-controls', content.id);
$('.ui-slidable__control', staffArea.element).each(function(index, control) {
var content = $(control).next('.ui-slidable__content');
var button = $(control).find('.ui-slidable');
expect(content).toHaveAttr('aria-labelledby', button.id);
expect(button).toHaveAttr('aria-controls', content.id);
});
});
......
openassessment/xblock/static/js/src/lms/oa_base.js
......@@ -41,6 +41,12 @@ OpenAssessment.clearUnsavedChanges = function() {
OpenAssessment.BaseView.prototype = {
IS_SHOWING_CLASS: "is--showing",
SLIDABLE_CLASS: "ui-slidable",
SLIDABLE_CONTENT_CLASS: "ui-slidable__content",
SLIDABLE_CONTROLS_CLASS: "ui-slidable__control",
SLIDABLE_CONTAINER_CLASS: "ui-slidable__container",
/**
* Checks to see if the scrollTo function is available, then scrolls to the
* top of the list of steps (or the specified selector) for this display.
......@@ -57,6 +63,7 @@ OpenAssessment.BaseView.prototype = {
}
if ($.scrollTo instanceof Function) {
$(window).scrollTo($(selector, this.element), 800, {offset: -50});
$(selector + " > header ." + this.SLIDABLE_CLASS, this.element).focus();
}
},
......@@ -66,11 +73,31 @@ OpenAssessment.BaseView.prototype = {
* @param {element} parentElement JQuery selector for the container element.
*/
setUpCollapseExpand: function(parentElement) {
parentElement.on('click', '.ui-toggle-visibility__control', function(eventData) {
var sel = $(eventData.target).closest('.ui-toggle-visibility');
sel.toggleClass('is--collapsed');
}
);
var view = this;
$('.' + view.SLIDABLE_CONTROLS_CLASS, parentElement).each(function() {
$(this).on("click", function(event) {
event.preventDefault();
var $slidableControl = $(event.target).closest('.' + view.SLIDABLE_CONTROLS_CLASS);
var $container = $slidableControl.closest('.' + view.SLIDABLE_CONTAINER_CLASS);
var $toggleButton = $slidableControl.find('.' + view.SLIDABLE_CLASS);
var $panel = $slidableControl.next('.' + view.SLIDABLE_CONTENT_CLASS);
if ($container.hasClass('is--showing')) {
$panel.slideUp();
$toggleButton.attr('aria-expanded', 'false');
$container.removeClass('is--showing');
} else if (!$container.hasClass('has--error') &&
!$container.hasClass('is--empty') &&
!$container.hasClass('is--unavailable')) {
$panel.slideDown();
$toggleButton.attr('aria-expanded', 'true');
$container.addClass('is--showing');
}
});
});
},
/**
......@@ -96,13 +123,13 @@ OpenAssessment.BaseView.prototype = {
* Refresh the Assessment Modules. This should be called any time an action is
* performed by the user.
*/
loadAssessmentModules: function() {
this.trainingView.load();
this.peerView.load();
this.staffView.load();
this.selfView.load();
this.gradeView.load();
this.leaderboardView.load();
loadAssessmentModules: function(usageID) {
this.trainingView.load(usageID);
this.peerView.load(usageID);
this.staffView.load(usageID);
this.selfView.load(usageID);
this.gradeView.load(usageID);
this.leaderboardView.load(usageID);
/**
this.messageView.load() is intentionally omitted.
Because of the asynchronous loading, there is no way to tell (from the perspective of the
......@@ -158,6 +185,8 @@ OpenAssessment.BaseView.prototype = {
$(container + " .message__content", element).html('<p>' + (message ? _.escape(message) : "") + '</p>');
// Toggle the error class
$(container, element).toggleClass('has--error', message !== null);
// Send focus to the error message
$(container + " > .message", element).focus();
}
},
......@@ -173,6 +202,8 @@ OpenAssessment.BaseView.prototype = {
}
var $container = $('#openassessment__' + stepName);
$container.toggleClass('has--error', true);
$container.removeClass('is--showing');
$container.find('.ui-slidable').attr('aria-expanded', 'false');
$container.find('.step__status__value i').removeClass().addClass('icon fa fa-exclamation-triangle');
$container.find('.step__status__value .copy').html(_.escape(errorMessage));
},
......
openassessment/xblock/static/js/src/lms/oa_grade.js
......@@ -16,15 +16,22 @@ OpenAssessment.GradeView.prototype = {
/**
* Load the grade view.
*/
load: function() {
load: function(usageID) {
var view = this;
var baseView = this.baseView;
var stepID = "#openassessment__grade";
this.server.render('grade').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__grade', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__grade', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' &&
!$(stepID, view.element).hasClass("is--unfinished") &&
!$(stepID, view.element).hasClass("is--unstarted") &&
!$(stepID, view.element).hasClass("is--waiting--staff")) {
$("[id='oa_grade_" + usageID + "']", view.element).focus();
}
}
).fail(function(errMsg) {
baseView.showLoadError('grade', errMsg);
......
openassessment/xblock/static/js/src/lms/oa_leaderboard.js
......@@ -19,7 +19,7 @@ OpenAssessment.LeaderboardView.prototype = {
/**
Load the leaderboard view.
**/
load: function() {
load: function(usageID) {
var view = this;
var baseView = this.baseView;
this.server.render('leaderboard').done(
......@@ -27,9 +27,22 @@ OpenAssessment.LeaderboardView.prototype = {
// Load the HTML and install event handlers
$('#openassessment__leaderboard', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__leaderboard', view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__leaderboard", view.element).hasClass("is--showing")) {
$("[id='oa_leaderboard_" + usageID + "']", view.element).focus();
}
}
).fail(function(errMsg) {
baseView.showLoadError('leaderboard', errMsg);
});
}
},
/**
Install event handlers for the view.
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__leaderboard', this.element));
},
};
openassessment/xblock/static/js/src/lms/oa_peer.js
......@@ -23,14 +23,18 @@ OpenAssessment.PeerView.prototype = {
/**
Load the peer assessment view.
**/
load: function() {
load: function(usageID) {
var view = this;
var stepID = "#openassessment__peer-assessment";
this.server.render('peer_assessment').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__peer-assessment', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__peer-assessment', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers(false);
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_peer_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.baseView.showLoadError('peer-assessment');
......@@ -46,7 +50,7 @@ OpenAssessment.PeerView.prototype = {
can use to continue assessing peers after they've completed
their peer assessment requirements.
**/
loadContinuedAssessment: function() {
loadContinuedAssessment: function(usageID) {
var view = this;
view.continueAssessmentEnabled(false);
this.server.renderContinuedPeer().done(
......@@ -55,6 +59,9 @@ OpenAssessment.PeerView.prototype = {
$('#openassessment__peer-assessment', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__peer-assessment', view.element));
view.installHandlers(true);
if (typeof usageID !== 'undefined') {
$("[id='oa_peer_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.baseView.showLoadError('peer-assessment');
......@@ -131,7 +138,7 @@ OpenAssessment.PeerView.prototype = {
sel.find('.action--continue--grading').click(
function(eventObject) {
eventObject.preventDefault();
view.loadContinuedAssessment();
view.loadContinuedAssessment(view.baseView.getUsageID());
}
);
},
......@@ -183,10 +190,11 @@ OpenAssessment.PeerView.prototype = {
peerAssess: function() {
var view = this;
var baseView = view.baseView;
var usageID = baseView.getUsageID();
this.peerAssessRequest(function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules();
baseView.scrollToTop();
baseView.loadAssessmentModules(usageID);
baseView.scrollToTop("#openassessment__peer-assessment");
});
},
......@@ -198,11 +206,12 @@ OpenAssessment.PeerView.prototype = {
var view = this;
var gradeView = this.baseView.gradeView;
var baseView = view.baseView;
var usageID = baseView.getUsageID();
view.peerAssessRequest(function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
view.loadContinuedAssessment();
view.loadContinuedAssessment(usageID);
gradeView.load();
baseView.scrollToTop();
baseView.scrollToTop("#openassessment__peer-assessment");
});
},
......
openassessment/xblock/static/js/src/lms/oa_response.js
......@@ -39,19 +39,22 @@ OpenAssessment.ResponseView.prototype = {
MAX_FILE_SIZE: 5242880,
UNSAVED_WARNING_KEY: "learner-response",
/**
Load the response (submission) view.
**/
load: function() {
load: function(usageID) {
var view = this;
var stepID = '#openassessment__response';
this.server.render('submission').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__response', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__response', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers();
view.setAutoSaveEnabled(true);
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_response_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.baseView.showLoadError('response');
......@@ -68,7 +71,6 @@ OpenAssessment.ResponseView.prototype = {
if (sel.find('.submission__answer__display__file').length) {
uploadType = sel.find('.submission__answer__display__file').data('upload-type');
}
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
......@@ -433,12 +435,14 @@ OpenAssessment.ResponseView.prototype = {
Transition the user to the next step in the workflow.
**/
moveToNextStep: function() {
this.load();
this.baseView.loadAssessmentModules();
var baseView = this.baseView;
var usageID = baseView.getUsageID();
this.load(usageID);
baseView.loadAssessmentModules(usageID);
// Disable the "unsaved changes" warning if the user
// tries to navigate to another page.
this.baseView.unsavedWarningEnabled(false, this.UNSAVED_WARNING_KEY);
baseView.unsavedWarningEnabled(false, this.UNSAVED_WARNING_KEY);
},
/**
......
openassessment/xblock/static/js/src/lms/oa_self.js
......@@ -23,14 +23,18 @@ OpenAssessment.SelfView.prototype = {
/**
Load the self assessment view.
**/
load: function() {
load: function(usageID) {
var view = this;
var stepID = '#openassessment__self-assessment';
this.server.render('self_assessment').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__self-assessment', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__self-assessment', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_self_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.showLoadError('self-assessment');
......@@ -125,6 +129,7 @@ OpenAssessment.SelfView.prototype = {
// Send the assessment to the server
var view = this;
var baseView = this.baseView;
var usageID = baseView.getUsageID();
baseView.toggleActionError('self', null);
view.selfSubmitEnabled(false);
......@@ -135,8 +140,9 @@ OpenAssessment.SelfView.prototype = {
).done(
function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules();
baseView.scrollToTop();
baseView.loadAssessmentModules(usageID);
view.load(usageID);
baseView.scrollToTop("#openassessment__self-assessment");
}
).fail(function(errMsg) {
baseView.toggleActionError('self', errMsg);
......
openassessment/xblock/static/js/src/lms/oa_staff.js
......@@ -16,14 +16,27 @@ OpenAssessment.StaffView.prototype = {
/**
* Load the staff assessment view.
**/
load: function() {
load: function(usageID) {
var view = this;
this.server.render('staff_assessment').done(
function(html) {
$('#openassessment__staff-assessment', view.element).replaceWith(html);
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__staff-assessment", view.element).hasClass("is--showing")) {
$("[id='oa_staff_grade_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.baseView.showLoadError('staff-assessment');
});
}
},
/**
Install event handlers for the view.
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__staff-assessment', this.element));
},
};
openassessment/xblock/static/js/src/lms/oa_staff_area.js
......@@ -22,9 +22,6 @@
FULL_GRADE_UNSAVED_WARNING_KEY: "staff-grade",
OVERRIDE_UNSAVED_WARNING_KEY: "staff-override",
IS_SHOWING_CLASS: "is--showing",
SLIDABLE_CLASS: "ui-slidable",
SLIDABLE_CONTENT_CLASS: "ui-slidable__content",
/**
* Load the staff area.
......@@ -114,31 +111,17 @@
}
);
}
$manageLearnersTab.find('.' + view.SLIDABLE_CLASS).click(
function(event) {
var $toggle = $(event.currentTarget),
$content = $toggle.next('.' + view.SLIDABLE_CONTENT_CLASS);
if ($toggle.hasClass(view.IS_SHOWING_CLASS)) {
$toggle.removeClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'false');
$content.slideUp();
}
else {
$toggle.addClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'true');
$content.slideDown();
}
}
);
// Install click handlers for ui-slidable sections
view.baseView.setUpCollapseExpand($manageLearnersTab);
// By default, focus is put on the summary.
$manageLearnersTab.find('.staff-info__student__report__summary').focus();
if (classToExpand) {
$manageLearnersTab.find('.' + classToExpand + ' .' + view.SLIDABLE_CONTENT_CLASS)
$manageLearnersTab.find('.' + classToExpand + ' .' + view.baseView.SLIDABLE_CONTENT_CLASS)
.slideDown();
$manageLearnersTab.find('.' + classToExpand + ' .' + view.SLIDABLE_CLASS)
.addClass(view.IS_SHOWING_CLASS).attr('aria-expanded', 'true').focus();
$manageLearnersTab.find('.' + classToExpand + ' .' + view.baseView.SLIDABLE_CLASS)
.addClass(view.baseView.IS_SHOWING_CLASS).attr('aria-expanded', 'true').focus();
}
deferred.resolve();
......@@ -163,16 +146,18 @@
loadStaffGradeForm: function() {
var view = this;
var $staffGradeTab = $('.openassessment__staff-grading', this.element);
var $staffGradeControl = $staffGradeTab.find('.' + view.SLIDABLE_CLASS);
var $staffGradeContent = $staffGradeTab.find('.' + view.SLIDABLE_CONTENT_CLASS);
var $staffGradeControl = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CLASS);
var $staffGradeContent = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTENT_CLASS);
var $staffGradeContainer = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
var deferred = $.Deferred();
var showFormError = function(errorMessage) {
$staffGradeTab.find('.staff__grade__form--error').text(errorMessage).focus();
};
$staffGradeControl.toggleClass(view.IS_SHOWING_CLASS, true).attr('aria-expanded', 'true');
$staffGradeControl.attr('aria-expanded', 'true');
if (this.staffGradeFormLoaded) {
$staffGradeContent.slideDown();
$staffGradeContainer.addClass(view.baseView.IS_SHOWING_CLASS);
deferred.resolve();
}
else {
......@@ -215,8 +200,11 @@
// For accessibility, move focus to the staff grade form control
// (since this code may have executed as part of "Submit and Grade Next...").
$staffGradeControl.focus();
// Install click handlers for ui-slidable sections
view.baseView.setUpCollapseExpand($('.staff__grade__form', view.element));
}
);
$staffGradeContainer.addClass(view.baseView.IS_SHOWING_CLASS);
deferred.resolve();
}).fail(function() {
......@@ -237,11 +225,13 @@
* form will be presented if the user later expands the staff grade section again).
*/
closeStaffGradeForm: function(clear) {
var $staffGradeTab = $('.openassessment__staff-grading', this.element);
var $staffGradeControl = $staffGradeTab.find('.' + this.SLIDABLE_CLASS);
var $staffGradeContent = $staffGradeTab.find('.' + this.SLIDABLE_CONTENT_CLASS);
var view = this;
var $staffGradeTab = $('.openassessment__staff-grading', view.element);
var $staffGradeControl = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CLASS).first();
var $staffGradeContent = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTENT_CLASS);
var $staffGradeContainer = $staffGradeTab.find('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
$staffGradeControl.toggleClass(this.IS_SHOWING_CLASS, false).attr('aria-expanded', 'false');
$staffGradeControl.attr('aria-expanded', 'false');
if (clear) {
// Collapse the editor and update the counts.
// This is the case of submitting an assessment and NOT continuing with grading.
......@@ -253,6 +243,7 @@
$staffGradeContent.slideUp();
}
$staffGradeContainer.removeClass(view.baseView.IS_SHOWING_CLASS);
// For accessibility, move focus to the staff grade form control.
$staffGradeControl.focus();
},
......@@ -371,7 +362,8 @@
// Install a click handler for showing the staff grading form.
$staffGradeTool.find('.staff__grade__show-form').click(
function(event) {
var wasShowing = $(event.currentTarget).hasClass(view.IS_SHOWING_CLASS);
var $container = $(event.currentTarget).closest('.' + view.baseView.SLIDABLE_CONTAINER_CLASS);
var wasShowing = $container.hasClass(view.baseView.IS_SHOWING_CLASS);
if (wasShowing) {
view.closeStaffGradeForm(false);
}
......
openassessment/xblock/static/js/src/lms/oa_training.js
......@@ -21,14 +21,18 @@ OpenAssessment.StudentTrainingView.prototype = {
/**
Load the student training view.
**/
load: function() {
load: function(usageID) {
var view = this;
var stepID = '#openassessment__student-training';
this.server.render('student_training').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__student-training', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__student-training', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' && $(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_training_" + usageID + "']", view.element).focus();
}
}
).fail(function() {
view.baseView.showLoadError('student-training');
......@@ -82,22 +86,22 @@ OpenAssessment.StudentTrainingView.prototype = {
}
var view = this;
var baseView = this.baseView;
var usageID = baseView.getUsageID();
this.server.trainingAssess(options).done(
function(corrections) {
var incorrect = $("#openassessment__student-training--incorrect", view.element);
var instructions = $("#openassessment__student-training--instructions", view.element);
if (!view.rubric.showCorrections(corrections)) {
view.load();
baseView.loadAssessmentModules();
view.load(usageID);
baseView.loadAssessmentModules(usageID);
incorrect.addClass("is--hidden");
instructions.removeClass("is--hidden");
} else {
instructions.addClass("is--hidden");
incorrect.removeClass("is--hidden");
}
baseView.scrollToTop();
baseView.scrollToTop("#openassessment__student-training");
}
).fail(function(errMsg) {
// Display the error
......
openassessment/xblock/static/sass/oa/elements/_navigation.scss
......@@ -5,71 +5,6 @@
// * openassessment-specific navigation UI
// --------------------
// collapse/expand
// --------------------
.ui-toggle-visibility {
// control to toggle
.ui-toggle-visibility__control {
@include transition(color $tmg-f2 ease-in);
@extend %fake-link;
text-decoration: none;
// optional icon
.icon, .ui-toggle-visibility__control__copy {
display: inline-block;
vertical-align: middle;
}
> .icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(90deg)));
}
.ui-toggle-visibility__control__copy {
@include margin-left(($baseline-h/4));
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f1 ease-in 0, max-height $tmg-f2 ease-in 0);
@extend %trans-opacity;
max-height: ($baseline-v*2000);
opacity: 1.0;
@include padding-left(($baseline-h/20));
@include padding-right(($baseline-h/20));
}
// STATE: is collapsed
&.is--collapsed {
>.ui-toggle-visibility__control > .icon {
@include transform(rotate(bidi-rotate-angle(0deg)));
@include transform-origin(50% 50%);
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f2 ease-in 0, max-height $tmg-f1 ease-in 0);
@extend %trans-opacity;
max-height: 0;
overflow: hidden;
opacity: 0.0;
}
}
}
// --------------------
// ui tooltips/hints - based on https://github.com/chinchang/hint.css
// --------------------
.has--hints {
......
openassessment/xblock/static/sass/oa/elements/_staff.scss
......@@ -22,26 +22,8 @@
.ui-staff {
.ui-slidable {
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
&.is--showing {
.icon {
@include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
}
}
}
.ui-slidable__content {
padding: ($baseline-v/2) ($baseline-h/4);
// Display as initially collapsed.
display: none;
}
}
......@@ -329,11 +311,6 @@
padding: 0;
}
}
// Override the default color for h3 (for elements that can be toggled).
.ui-slidable__control .staff__grade__title {
color: $action-primary-color;
}
}
// UI - cancel submission (action)
......@@ -356,13 +333,6 @@
// Learner info section
.staff-info__student__report {
// Override default button styling.
.ui-slidable {
@extend %btn-reset;
background-color: $staff-bg;
padding: 0;
}
.staff-info__final__grade__table {
margin-top: ($baseline-v/2);
}
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -1103,7 +1103,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
@include margin-left(0);
@include padding-left(0);
@include border-left(0);
width: 100%;
}
}
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -30,9 +30,9 @@
// --------------------
%ui-section {
@include transition(all $tmg-f1 ease-in-out);
@include transform(scale(1.0));
@include transform(scale(.99));
@include border-radius(($baseline-v/10));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l1);
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary;
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
......@@ -48,16 +48,19 @@
@include transform(scale(1.0));
}
// STATE: is collapsed
&.is--collapsed {
@include transform(scale(0.99));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l2);
// don't zoom on hover/focus when step has error
&.has--error {
&:hover, &:focus {
@include transform(scale(1.0));
@include transform(scale(.99));
}
}
// STATE: is showing
&.is--showing {
@include transform(scale(1.0));
@include single-box-shadow(0, 1px, 1px, 0, $shadow-l1);
}
// STATE: is loading
&.is--loading {
@include transform(scale(0.99));
......@@ -169,7 +172,6 @@
@include margin-left(($baseline-h/4));
white-space: pre-wrap;
display: inline;
color: $heading-color;
}
}
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -110,18 +110,6 @@
color: inherit;
}
.ui-toggle-visibility .ui-toggle-visibility__control, .ui-toggle-visibility .ui-toggle-visibility__control .step__label {
color: $action-primary-color;
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// peer assessment
.step--peer-assessment .list--peer-assessments {
list-style: none outside none !important;
......@@ -141,7 +129,7 @@
}
// submission/results collapse and expand targets
.question__title.ui-toggle-visibility__control {
.question__title.ui-slidable {
.question__title__copy {
color: inherit !important;
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -97,16 +97,7 @@
display: block;
margin-bottom: ($baseline-v/2);
width: 100%;
@include media($bp-dl) {
@include bidi-span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include bidi-span-columns(9 of 12);
margin-bottom: 0;
}
margin-bottom: 0;
.step__counter, .wrapper--copy {
display: inline-block;
......@@ -178,7 +169,6 @@
.step__label {
@extend %t-superheading;
color: $heading-primary-color;
}
.step__deadline {
......@@ -189,33 +179,33 @@
// step status
.step__status {
display: inline-block;
display: inline;
margin-top: ($baseline-v/4);
@include media($bp-dm) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
top: -($baseline-v/2) - 2;
}
@include media($bp-dl) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
top: -($baseline-v/2) - 2;
}
@include media($bp-dx) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
top: -($baseline-v/2) - 2;
}
.step__status__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
padding: ($baseline-v/4)-1 ($baseline-h/4);
background: $color-decorative-tertiary;
position: relative;
......@@ -317,16 +307,6 @@
}
}
// STATE: step is collapsed (not focused on)
&.is--collapsed {
.step__header {
padding-bottom: 0;
border-bottom: none;
margin-bottom: 0;
}
}
// STATE: step is incomplete
&.is--incomplete {
......@@ -416,6 +396,10 @@
color: $white-t;
}
}
button {
opacity: 1;
}
}
// STATE: has error
......@@ -437,38 +421,78 @@
.step__label {
color: $color-error;
}
.message {
}
}
}
// --------------------
// collapse and expand styling for step labels
// ui-slidable
// --------------------
// TODO: clean this scope up
.ui-toggle-visibility .ui-toggle-visibility__control .step__label {
.ui-slidable__container {
.ui-slidable__content {
display: none;
width: 100%;
}
// If there is an icon, it should rotate when clicked
@include transition(color $tmg-f2 ease-in);
color: $action-primary-color;
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
&.is--showing {
.ui-slidable__content {
display: block;
}
&:hover, &:focus {
color: $action-primary-color-focus;
.ui-slidable .icon {
@include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
}
.ui-slidable__container {
&:not(.is--showing) {
.icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(0deg)));
}
}
}
}
&:active, &.is--current {
color: $action-primary-color-active;
.ui-slidable {
// Override default button styling.
@extend %btn-reset;
color: $heading-primary-color;
background: none;
border-radius: ($baseline-v/4);
padding: 0px;
text-align: inherit;
&:active, &:focus:not(:disabled), &:hover:not(:disabled) {
background: none;
border: none;
box-shadow: none;
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
&:not([disabled]) {
color: $action-primary-color;
}
}
}
// --------------------
// submission
// --------------------
.wrapper--openassessment__prompt {
}
.submission__answer__part__prompt {
@extend %ui-well;
......@@ -789,7 +813,6 @@
.grade__value__title {
@extend %t-superheading;
color: $heading-primary-color;
.grade__value__earned {
@extend %t-strong;
......@@ -1154,14 +1177,4 @@
@extend %action-2;
@include margin-right(($baseline-v/2));
}
// --------------------
// STATE: incomplete
// --------------------
// --------------------
// STATE: waiting
// --------------------
}
openassessment/xblock/student_training_mixin.py
......@@ -71,7 +71,7 @@ class StudentTrainingMixin(object):
problem_closed, reason, start_date, due_date = self.is_closed(step="student-training")
user_service = self.runtime.service(self, 'user')
context = {}
context = {"xblock_id": self.get_xblock_id()}
template = 'openassessmentblock/student_training/student_training_unavailable.html'
# add allow_latex field to the context
......
openassessment/xblock/submission_mixin.py
......@@ -380,8 +380,8 @@ class SubmissionMixin(object):
path = 'openassessmentblock/response/oa_response.html'
context = {
'time_zone': get_current_time_zone(user_service)
}
'time_zone': get_current_time_zone(user_service),
"xblock_id": self.get_xblock_id()}
# Due dates can default to the distant future, in which case
# there's effectively no due date.
......
openassessment/xblock/test/test_leaderboard.py
......@@ -33,7 +33,7 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase):
self._assert_path_and_context(
xblock,
'openassessmentblock/leaderboard/oa_leaderboard_waiting.html',
{}
{'xblock_id': xblock.scope_ids.usage_id}
)
self._assert_leaderboard_visible(xblock, True)
......@@ -243,8 +243,9 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase):
'topscores': scores,
'allow_latex': xblock.allow_latex,
'file_upload_type': xblock.file_upload_type,
'xblock_id': xblock.scope_ids.usage_id
},
workflow_status='done'
workflow_status='done',
)
self.maxDiff = maxDiff
......
openassessment/xblock/test/test_peer.py
......@@ -638,6 +638,7 @@ class TestPeerAssessmentRender(XBlockHandlerTestCase):
mock_finished.return_value = (was_graded_enough, 1)
path, context = xblock.peer_path_and_context(continue_grading)
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path)
self.assertItemsEqual(context, expected_context)
......
openassessment/xblock/test/test_self.py
......@@ -443,6 +443,8 @@ class TestSelfAssessmentRender(XBlockHandlerTestCase):
})
path, context = xblock.self_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path)
self.assertItemsEqual(context, expected_context)
......
openassessment/xblock/test/test_staff.py
......@@ -42,7 +42,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
def _verify_grade_templates_workflow(self, xblock):
unavailable_context = {
'status_value': 'Not Available',
'step_classes': 'is--unavailable is--empty is--collapsed',
'button_active': 'disabled="disabled" aria-expanded="false"',
'step_classes': 'is--unavailable',
'xblock_id': xblock.scope_ids.usage_id
}
# Problem not yet started, Staff Grade section is marked "Not Available"
self._assert_path_and_context(xblock, unavailable_context)
......@@ -65,7 +67,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
'message_title': 'You Must Complete the Steps Above to View Your Grade',
'message_content': 'Although a course staff member has assessed your response, '
'you will receive your grade only after you have completed all '
'the required steps of this problem.'
'the required steps of this problem.',
'button_active': 'aria-expanded="false"',
'xblock_id': xblock.scope_ids.usage_id
}
)
......@@ -79,7 +83,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{
'status_value': 'Complete',
'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed',
'step_classes': 'is--showing',
'button_active': 'aria-expanded="true"',
'xblock_id': xblock.scope_ids.usage_id
}
)
......@@ -92,6 +98,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{
'status_value': 'Cancelled',
'icon_class': 'fa-exclamation-triangle',
'button_active': 'disabled="disabled" aria-expanded="false"',
'step_classes': 'is--unavailable',
'xblock_id': xblock.scope_ids.usage_id
}
)
......@@ -111,6 +120,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
'message_title': 'Waiting for a Staff Grade',
'message_content': 'Check back later to see if a course staff member has assessed your response. '
'You will receive your grade after the assessment is complete.',
'step_classes': 'is--showing',
'button_active': 'aria-expanded="true"',
'xblock_id': xblock.scope_ids.usage_id
}
)
......@@ -121,7 +133,9 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
{
'status_value': 'Complete',
'icon_class': 'fa-check',
'step_classes': 'is--complete is--empty is--collapsed',
'step_classes': 'is--complete is--empty',
'button_active': 'disabled="disabled" aria-expanded="false"',
'xblock_id': xblock.scope_ids.usage_id
}
)
......
openassessment/xblock/test/test_student_training.py
......@@ -39,6 +39,9 @@ class StudentTrainingTest(XBlockHandlerTestCase):
"""
path, context = xblock.training_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path)
self.assertEqual(len(context), len(expected_context))
for key in expected_context.keys():
......@@ -266,6 +269,9 @@ class StudentTrainingAssessTest(StudentTrainingTest):
"""
path, context = xblock.training_path_and_context()
expected_context['xblock_id'] = xblock.scope_ids.usage_id
self.assertEqual(path, expected_path)
self.assertEqual(len(context), len(expected_context))
for key in expected_context.keys():
......
openassessment/xblock/test/test_submission.py
......@@ -487,6 +487,8 @@ class SubmissionRenderTest(XBlockHandlerTestCase):
AssertionError: An assertion failed.
"""
expected_context['xblock_id'] = xblock.scope_ids.usage_id
path, context = xblock.submission_path_and_context()
self.maxDiff = None # Show a full diff
self.assertEqual(path, expected_path)
......
test/acceptance/accessibility.py
......@@ -29,7 +29,8 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
"empty-heading", # TODO: AC-197
"link-href", # TODO: AC-199
"link-name", # TODO: AC-196
"skip-link", # TODO: AC-179
"skip-link", # TODO: AC-179,
"duplicate-id", # TODO: TNL-1593
]
})
page.a11y_audit.check_for_accessibility_errors()
......
test/acceptance/pages.py
......@@ -76,6 +76,9 @@ class OpenAssessmentPage(PageObject):
if self.q(css='#djDebug').visible:
self.q(css='#djHideToolBarButton').click()
def button(self, button_css):
return self.q(css=button_css + " > .ui-slidable")
class SubmissionPage(OpenAssessmentPage):
"""
......@@ -407,6 +410,7 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin):
message_title = self.q(css=self._bounded_selector(".message__title"))
if len(message_title) == 0:
return None
return message_title.text[0]
def verify_status_value(self, expected_value):
......@@ -418,6 +422,25 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin):
"Expected status value present"
).fulfill()
def open_step(self):
"""
Opens the current step if it is not already open
Returns:
AssessmentPage
"""
container = self._bounded_selector("")
if 'is--showing' not in " ".join(self.q(css=container).attrs('class')):
self.q(css=self._bounded_selector(".ui-slidable")).click()
EmptyPromise(
lambda: 'is--showing' in " ".join(self.q(css=container).attrs('class')),
"Step is showing"
)
return self
class GradePage(OpenAssessmentPage):
"""
......
test/acceptance/tests.py
......@@ -187,7 +187,8 @@ class OpenAssessmentTest(WebAppTest):
self.staff_asmnt_page.wait_for_page()
self.assertEqual("Staff Grade", self.staff_asmnt_page.label)
self.staff_asmnt_page.verify_status_value(expected_status)
self.assertEqual(expected_message_title, self.staff_asmnt_page.message_title)
message_title = self.staff_asmnt_page.open_step().message_title
self.assertEqual(expected_message_title, message_title)
def do_training(self):
"""
......@@ -359,6 +360,7 @@ class StaffAssessmentTest(OpenAssessmentTest):
self.refresh_page()
self.assertEqual(self.STAFF_OVERRIDE_SCORE, self.grade_page.wait_for_page().score)
class PeerAssessmentTest(OpenAssessmentTest):
"""
Test the peer-assessment flow.
......@@ -806,8 +808,11 @@ class FullWorkflowMixin(object):
self.browser, password=self.TEST_PASSWORD, course_id=self.TEST_COURSE_ID, staff=True
)
auto_auth_page.visit()
username_email = auto_auth_page.get_username_and_email()
self.submission_page.visit().submit_response(self.SUBMISSION)
EmptyPromise(self.submission_page.button("#openassessment__student-training").is_focused(),
"Student training button should be focused")
return username_email
......@@ -819,8 +824,16 @@ class FullWorkflowMixin(object):
(str, str): the username and password of the newly created user
"""
username, email = self.do_submission()
EmptyPromise(self.submission_page.button("#openassessment__student-training").is_focused(),
"Student training button should be focused")
self.do_training()
EmptyPromise(self.submission_page.button("#openassessment__self-assessment").is_focused(),
"Self assessment button should be focused")
self.submit_self_assessment(self.SELF_ASSESSMENT)
EmptyPromise(self.submission_page.button("#openassessment__grade").is_focused(),
"Grade button should be focused")
return username, email
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment