Commit 039ce21a by ssemenova

ORA unique IDs accessibility

TNL-1593
parent 022e8e0c
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade has--error ui-slidable__container" tabindex="-1">
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--initially--collapsed has--error ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
......
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unfinished ui-slidable__container" tabindex="-1">
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--unfinished is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}">
......
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--unstarted ui-slidable__container" tabindex="-1">
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--unstarted is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
......
{% load i18n %}
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--showing {{ is_waiting_staff }} ui-slidable__container" tabindex="-1">
<li id="openassessment__grade__{{ xblock_id }}" 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">
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
......
{% load i18n %}
{% spaceless %}
<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">
<li id="openassessment__leaderboard__{{ xblock_id }}" 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">
<button class="ui-slidable" aria-expanded="true" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
......
{% load i18n %}
{% spaceless %}
<li id="openassessment__leaderboard" class="openassessment__steps__step step--leaderboard ui-slidable__container" tabindex="-1">
<li id="openassessment__leaderboard__{{ xblock_id }}" class="openassessment__steps__step step--leaderboard is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h2 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
......@@ -11,10 +11,12 @@
</h2>
</header>
<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>
<div class="ui-slidable__content" aria-labelledby="oa_leaderboard_{{ xblock_id }}" id="oa_leaderboard_{{ xblock_id }}_content">
<div class="wrapper--step__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>
</div>
</div>
</div>
</div>
......
{% load i18n %}
{% spaceless %}
<div id="openassessment__message" class="openassessment__message message">
<div id="openassessment__message__{{ xblock_id }}" class="openassessment__message message">
<h3 class="message__title">
{% if not_yet_open %}
{% trans "This Task Is Not Yet Available" %}
......
{% load i18n %}
{% spaceless %}
<div id="openassessment__message" class="openassessment__message message">
<div id="openassessment__message__{{ xblock_id }}" class="openassessment__message message">
<h3 class="message__title">{% trans "You Have Completed This Assignment" %} </h3>
<div class="message__content">
<p>
{% if waiting %}
<p>{% trans "Your final grade will be available when the assessments of your response are complete." %}</p>
{% else %}
<a data-behavior="ui-scroll" href="#openassessment__grade">{% trans "Review your grade and your assessment details." %}</a>
<a data-behavior="ui-scroll" href="#openassessment__grade__{{ xblock_id }}">{% trans "Review your grade and your assessment details." %}</a>
{% endif %}
</p>
</div>
......
{% load i18n %}
{% spaceless %}
<div id="openassessment__message" class="openassessment__message message">
<div id="openassessment__message__{{ xblock_id }}" class="openassessment__message message">
<h3 class="message__title">
{% trans "Assignment in progress" %}
</h3>
......@@ -16,7 +16,7 @@
{% if self_not_released %}
{% trans "Check back later when the assessment period has started." %}
{% else %}
{% with start_link='<a data-behavior="ui-scroll" href="#openassessment__self-assessment">'|safe %}
{% with start_link='<a data-behavior="ui-scroll" href="#openassessment__self-assessment__'|add:xblock_id|add:'">'|safe %}
{% with start_strong='<strong>'|safe end_strong='</strong>'|safe end_link='</a>'|safe %}
{% if self_approaching %}
{% blocktrans %}
......@@ -34,7 +34,7 @@
{% if peer_not_released %}
{% trans "Check back later when the assessment period has started." %}
{% else %}
{% with start_link='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment">'|safe %}
{% with start_link='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment__'|add:xblock_id|add:'">'|safe%}
{% with start_strong='<strong>'|safe end_strong='</strong>'|safe end_link='</a>'|safe %}
{% if peer_approaching and peer_not_available %}
{% blocktrans %}
......
{% load i18n %}
{% spaceless %}
<div id="openassessment__message" class="openassessment__message message">
<div id="openassessment__message__{{ xblock_id }}" class="openassessment__message message">
<div class="message__content">
<p>
{% if approaching %}
......
{% load i18n %}
{% spaceless %}
<div id="openassessment__message" class="openassessment__message message">
<div id="openassessment__message__{{ xblock_id }}" class="openassessment__message message">
<h3 class="message__title">{% trans "Instructions Unavailable" %} </h3>
<div class="message__content">
<p> {% trans "The instructions for this step could not be loaded." %}</p>
......
{% load i18n %}
{% spaceless %}
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment problem" id="openassessment">
<div class="openassessment problem">
<div class="wrapper--grid">
<h2 class="openassessment__title problem__header">{% trans title %}</h2>
{% if title %}
<h2 class="openassessment__title problem__header">{% trans title %}</h2>
{% endif %}
<div class="wrapper-openassessment__message">
{% block message %}
<div id="openassessment__message" class="openassessment__message message">
<div class="openassessment__message message">
<div class="message__content">
<p>{% trans "This assignment has several steps. In the first step, you'll provide a response to the question. The other steps appear below the Your Response field." %}</p>
</div>
......@@ -15,9 +18,9 @@
{% endblock %}
</div>
<ol class="openassessment__steps" id="openassessment__steps">
<ol class="openassessment__steps">
{% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}" class="openassessment__steps__step is--loading">
<li class="{{ assessment.class_id }} openassessment__steps__step is--loading">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
......
......@@ -2,21 +2,19 @@
{% load i18n %}
<div class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<li
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 }}"
class="field field--radio is--required assessment__rubric__question is--showing ui-slidable__container {% if criterion.options %}has--options{% endif %} {{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
>
<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">
<button class="ui-slidable" aria-expanded="true" id="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}" aria-controls="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}__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-slidable__content" aria-labelledby="oa_rubric_{{ submission.uuid }}" id="oa_rubric_{{ submission.uuid }}_content">
<div class="ui-slidable__content" aria-labelledby="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}" id="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}__content">
<div class="question__answers">
<div role="group" aria-labelledby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}">
{% for option in criterion.options %}
......@@ -24,11 +22,11 @@
<div class="wrapper--input">
<input type="radio"
data-criterion-name="{{ criterion.name }}"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
class="answer__value"
class="answer__value rubric_{{ criterion.order_num }}_{{ option.order_num }}"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
value="{{ option.name }}"
name="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"/>
<label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
<label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
class="answer__label"
>{{ option.label }}</label>
</div>
......@@ -43,10 +41,10 @@
{% if criterion.feedback == 'optional' or criterion.feedback == 'required' %}
<div class="answer--feedback">
<div class="wrapper--input">
<label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback" class="answer__label">{% trans "Comments" %}</label>
<label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}" class="answer__label">{% trans "Comments" %}</label>
<textarea
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback"
class="answer__value"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}"
value="{{ criterion.name }}"
data-criterion-name="{{ criterion.name }}"
aria-describedby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}"
......@@ -62,14 +60,14 @@
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback">
<label class="question__title" for="{{ rubric_type }}__assessment__rubric__question--feedback__value">
<label class="question__title" for="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}">
<span class="question__title__copy">{{ rubric_feedback_prompt }}</span>
</label>
<div class="wrapper--input">
<textarea
id="{{ rubric_type }}__assessment__rubric__question--feedback__value"
class="assessment__rubric__question--feedback__value"
id="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}"
placeholder="{{ rubric_feedback_default_text }}"
maxlength="1000"
>
......
......@@ -10,14 +10,13 @@
</header>
{% endif %}
<div class="{{ class_prefix }}__display__file {% if not file_url %}is--hidden{% endif %}" id="submission__{{ file_upload_type }}__upload" data-upload-type="{{ file_upload_type }}">
<div class="{{ class_prefix }}__display__file {% if not file_url %}is--hidden{% endif %} submission__{{ file_upload_type }}__upload" data-upload-type="{{ file_upload_type }}">
{% if file_upload_type == "image" %}
<img id="submission__answer__file"
class="submission--image"
<img class="submission__answer__file submission--image"
alt="{% trans "The image associated with this submission." %}"
src="{{ file_url }}" />
{% elif file_upload_type == "pdf-and-image" or file_upload_type == "custom" %}
<a href="{{ file_url }}" id="submission__answer__file" class="submission--file" target="_blank">
<a href="{{ file_url }}" class="submission__answer__file submission--file" target="_blank">
{% trans "View the file associated with this submission." %}
</a>
{% if show_warning %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li
id="openassessment__peer-assessment"
id="openassessment__peer-assessment__{{ xblock_id }}"
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"
......@@ -59,7 +59,7 @@
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<article class="peer-assessment peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">
......@@ -78,8 +78,8 @@
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=peer_file_url header=translated_header class_prefix="peer-assessment" show_warning="true" %}
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="peer" %}
<form class="peer-assessment--001__assessment peer-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="peer" submission=peer_submission %}
</form>
</article>
</li>
......@@ -94,7 +94,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
</button>
</li>
......
......@@ -4,7 +4,7 @@
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--showing is--incomplete ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing is--incomplete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--complete is--initially--collapsed ui-slidable__container" tabindex="-1">
{% endblock %}
{% block title %}
......
......@@ -3,8 +3,8 @@
{% block list_item %}
<li
id="openassessment__peer-assessment"
class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container"
id="openassessment__peer-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--peer-assessment is--complete ui-slidable__container is--showing"
data-submission-uuid="{{ peer_submission.uuid }}"
tabindex="-1"
>
......@@ -12,7 +12,7 @@
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
{% endblock %}
{% block title %}
......@@ -47,7 +47,7 @@
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<article class="peer-assessment peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">{% trans "Assessment #" %}
......@@ -63,8 +63,8 @@
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=peer_file_url header=translated_header class_prefix="peer-assessment" show_warning="true" %}
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="peer" %}
<form class="peer-assessment--001__assessment peer-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="peer" submission=peer_submission %}
</form>
</article>
</li>
......@@ -78,7 +78,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<button type="submit" class="peer-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
</button>
</li>
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing is--complete ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing is--complete ui-slidable__container" tabindex="-1">
{% endblock %}
{% block button %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty ui-slidable__container" tabindex="-1">
{% endblock %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1">
<li id="openassessment__peer-assessment__{{ xblock_id }}" class="openassessment__steps__step step--peer-assessment is--showing ui-slidable__container" tabindex="-1">
{% endblock %}
......
......@@ -2,8 +2,7 @@
{% load i18n %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__response"
class="openassessment__steps__step step--response is--showing ui-slidable__container"
<li class="openassessment__steps__step step--response is--showing ui-slidable__container"
tabindex="-1">
{% endblock %}
......@@ -55,7 +54,7 @@
</div>
<div class="step__content">
<form id="response__submission" class="response__submission">
<form class="response__submission">
<ol class="list list--fields response__submission__content">
{% for part in saved_response.answer.parts %}
<li class="submission__answer__part">
......@@ -67,9 +66,9 @@
</div>
</article>
<div class="field field--textarea submission__answer__part__text">
<label class="sr" for="submission__answer__part__text__{{ forloop.counter }}">{% trans "Your response to the question above." %}</label>
<label class="sr" for="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}">{% trans "Your response to the question above." %}</label>
<textarea
id="submission__answer__part__text__{{ forloop.counter }}"
id="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}"
class="submission__answer__part__text__value"
placeholder="{% trans "Enter your response to the question above." %}"
maxlength="100000"
......@@ -79,15 +78,15 @@
{% endfor %}
{% if file_upload_type %}
<li class="field">
<div id="upload__error">
<div class="upload__error">
<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>
</div>
<label class="sr" for="submission__answer__upload">{% trans "Select a file to upload for this submission." %}</label>
<input type="file" id="submission__answer__upload" class="file--upload">
<button type="submit" id="file__upload" class="action action--upload is--disabled">{% trans "Upload your file" %}</button>
<input type="file" class="submission__answer__upload file--upload">
<button type="submit" class="file__upload action action--upload is--disabled">{% trans "Upload your file" %}</button>
</li>
{% endif %}
......@@ -104,29 +103,29 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled" aria-describedby="response__save_status">
<button type="submit" class="action action--save submission__save is--disabled" aria-describedby="response__save_status__{{ xblock_id }}">
{% trans "Save your progress" %}
</button>
<div id="response__save_status" class="response__submission__label">
<div id="response__save_status__{{ xblock_id }}" class="response__submission__label">
<span class="sr">{% trans "Your Submission Status" %}:</span>
{{ save_status }}
</div>
</li>
{% if allow_latex %}
<li class="list--actions__item">
<button type="submit" id="submission__preview" class="action action--save submission__save is--disabled" aria-describedby="response__preview_explanation">
<button type="submit" class="submission__preview action action--save submission__save is--disabled" aria-describedby="response__preview_explanation__{{ xblock_id }}">
{% trans "Preview in LaTeX"%}
</button>
<div id="response__preview_explanation" class="response__submission__label">
<div id="response__preview_explanation__{{ xblock_id }}" class="response__submission__label">
{% trans "Click to preview your submission in LaTeX"%}
</div>
</li>
<li id = "submission__preview__item" class="list--actions__item">
<li class="submission__preview__item list--actions__item">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">{% trans "Preview Response"%}</h3>
<div class="submission__answer__display__content">
<p id="preview_content"></p>
<p class="preview_content"></p>
</div>
</article>
</li>
......@@ -144,8 +143,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="step--response__submit"
class="action action--submit step--response__submit {{ submit_enabled|yesno:",is--disabled" }}">
<button type="submit" class="action action--submit step--response__submit {{ submit_enabled|yesno:",is--disabled" }}">
<span class="copy">{% trans "Submit your response and move to the next step" %}</span>
</button>
</li>
......
......@@ -3,11 +3,15 @@
{% load tz %}
{% block list_item %}
<li id="openassessment__response"
class="openassessment__steps__step step--response has--error ui-slidable__container"
<li id="openassessment__response__{{ xblock_id }}"
class="openassessment__steps__step step--response has--error ui-slidable__container is--initially--collapsed"
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>
......@@ -19,7 +23,7 @@
{% endblock %}
{% block body %}
<div class="ui-slidable__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">
......
{% extends "openassessmentblock/response/oa_response.html" %}
{% load i18n %}
{% block list_item %}
<li id="openassessment__response"
class="openassessment__steps__step step--response is--incomplete ui-slidable__container"
<li id="openassessment__response__{{ xblock_id }}"
class="openassessment__steps__step step--response is--incomplete ui-slidable__container is--initially--collapsed"
tabindex="-1">
{% endblock %}
......
......@@ -2,8 +2,8 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
<li id="openassessment__response__{{ xblock_id }}"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%} is--initially--collapsed"
tabindex="-1">
{% endblock %}
......
......@@ -2,8 +2,8 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
<li id="openassessment__response__{{ xblock_id }}"
class="openassessment__steps__step step--response is--complete ui-slidable__container {% if allow_latex %}allow--latex{%endif%} is--initially--collapsed"
tabindex="-1">
{% endblock %}
......@@ -30,15 +30,15 @@
<div class="message__content">
{% trans "You will receive your grade after all steps are complete and your response is fully assessed." %}
{% if peer_incomplete and self_incomplete %}
{% blocktrans with peer_start_tag='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment">'|safe self_start_tag='<a data-behavior="ui-scroll" href="#openassessment__self-assessment">'|safe end_tag='</a>'|safe %}
{% blocktrans with peer_start_tag='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment__'|add:xblock_id|add:'">'|safe self_start_tag='<a data-behavior="ui-scroll" href="#openassessment__self-assessment__'|add:xblock_id|add:'">'|safe end_tag='</a>'|safe %}
You still need to complete the {{ peer_start_tag }}peer assessment{{ end_tag }} and {{ self_start_tag }}self assessment{{ end_tag }} steps.
{% endblocktrans %}
{% elif peer_incomplete %}
{% blocktrans with start_tag='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment">'|safe end_tag='</a>'|safe %}
{% blocktrans with start_tag='<a data-behavior="ui-scroll" href="#openassessment__peer-assessment__'|add:xblock_id|add:'">'|safe end_tag='</a>'|safe%}
You still need to complete the {{ start_tag }}peer assessment{{ end_tag }} step.
{% endblocktrans %}
{% elif self_incomplete %}
{% blocktrans with start_tag='<a data-behavior="ui-scroll" href="#openassessment__self-assessment">'|safe end_tag='</a>'|safe %}
{% blocktrans with start_tag='<a data-behavior="ui-scroll" href="#openassessment__self-assessment__'|add:xblock_id|add:'">'|safe end_tag='</a>'|safe%}
You still need to complete the {{ start_tag }}self assessment{{ end_tag }} step.
{% endblocktrans %}
{% endif %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__response"
<li id="openassessment__response__{{ xblock_id }}"
class="openassessment__steps__step step--response is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -2,7 +2,7 @@
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__self-assessment"
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
......@@ -44,7 +44,7 @@
<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">
<article class="self-assessment__display">
<header class="self-assessment__display__header">
<h3 class="self-assessment__display__title">{% trans "Your Response" %}</h3>
</header>
......@@ -56,8 +56,8 @@
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=self_file_url header=translated_header class_prefix="self-assessment" %}
</article>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="self" %}
<form class="self-assessment--001__assessment self-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="self" submission=self_submission %}
</form>
</div>
......@@ -69,7 +69,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
<button type="submit" class="self-assessment--001__assessment__submit action action--submit is--disabled">
<span class="copy">{% trans "Submit your assessment" %}</span>
</button>
</li>
......
......@@ -4,7 +4,7 @@
{% block list_item %}
<li id="openassessment__self-assessment"
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment"
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--showing is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment"
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -2,7 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__self-assessment"
<li id="openassessment__self-assessment__{{ xblock_id }}"
class="openassessment__steps__step step--self-assessment is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
......
{% load i18n %}
<li id="openassessment__staff-assessment" class="openassessment__steps__step step--staff-assessment ui-slidable__container {{ step_classes }}" tabindex="-1">
<li id="openassessment__staff-assessment__{{ xblock_id }}" 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">
<button class="ui-slidable" {{ button_active }}
......
......@@ -3,6 +3,7 @@
<div class="openassessment__student-info staff-info__student__report"
data-submission-uuid="{{ submission.uuid }}">
{% if submission %}
<h2 class="title">
<span class="label staff-info__student__report__summary" tabindex="-1">
......@@ -12,7 +13,7 @@
</span>
</h2>
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response ui-slidable__container">
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__response ui-slidable__container is--initially--collapsed ">
<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">
......@@ -77,7 +78,7 @@
{% 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 ui-slidable__container">
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__student__grade ui-slidable__container is--initially--collapsed ">
<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">
......@@ -155,7 +156,7 @@
</div>
{% if not workflow_cancellation %}
<div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<div class="staff-info__staff-override ui-staff__content__section wrapper--ui--collapse ui-slidable__container is--initially--collapsed ">
<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">
......@@ -171,7 +172,7 @@
</div>
</div>
<div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse ui-slidable__container">
<div class="staff-info__workflow-cancellation ui-staff__content__section wrapper--ui--collapse ui-slidable__container is--initially--collapsed ">
<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">
......
{% load i18n %}
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments ui-slidable__container">
<div class="staff-info__status ui-staff__content__section wrapper--ui--collapse staff-info__{{ class_type }}__assessments ui-slidable__container is--initially--collapsed ">
<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">
......
......@@ -2,8 +2,7 @@
{% load tz %}
{% spaceless %}
{% block list_item %}
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
<li class="openassessment__steps__step step--student-training is--showing ui-slidable__container {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
......@@ -48,7 +47,7 @@
<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">
<div class="openassessment__student-training--instructions step__message message message--correct">
<h3 class="message__title">{% trans "Learning to Assess Responses" %}</h3>
<div class="message__content">
......@@ -56,7 +55,7 @@
</div>
</div>
<div id="openassessment__student-training--incorrect" class="step__message message message--incorrect is--hidden">
<div class="openassessment__student-training--incorrect step__message message message--incorrect is--hidden">
<h3 class="message__title">{% trans "Learning to Assess Responses" %}</h3>
<div class="message__content">
......@@ -65,7 +64,7 @@
</div>
<div class="step__content">
<article class="student-training__display" id="student-training">
<article class="student-training__display">
<header class="student-training__display__header">
{% with training_num_current=training_num_current training_num_available=training_num_available %}
<h3 class="student-training__display__title">
......@@ -83,19 +82,18 @@
</article>
<form id="student-training--001__assessment" class="student-training__assessment" method="post">
<form class="student-training--001__assessment student-training__assessment" method="post">
<div class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in training_rubric.criteria %}
{% if criterion.options %}
<li
class="field field--radio is--required assessment__rubric__question has--options is--showing ui-slidable__container"
id="training__assessment__rubric__question--{{ criterion.order_num }}"
class="field field--radio is--required assessment__rubric__question has--options is--showing ui-slidable__container training__assessment__rubric__question--{{ criterion.order_num }}"
>
<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 id="training__assessment__rubric__prompt--{{ criterion.order_num }}__{{ xblock_id }}" class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</button>
</h4>
......@@ -115,17 +113,17 @@
</div>
</div>
<div class="question__answers">
<div role="group" aria-labelledby="training__assessment__rubric__prompt--{{ criterion.order_num }}">
<div role="group" aria-labelledby="training__assessment__rubric__prompt--{{ criterion.order_num }}__{{ xblock_id }}">
{% for option in criterion.options %}
<div class="answer">
<div class="wrapper--input">
<input type="radio"
data-criterion-name="{{ criterion.name }}"
id="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
class="answer__value"
id="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
class="answer__value rubric_{{ criterion.order_num }}_{{ option.order_num }}"
value="{{ option.name }}"
name="training__assessment__rubric__question--{{ criterion.order_num }}"/>
<label for="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}"
<label for="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
class="answer__label">{{ option.label }}</label>
</div>
<div class="wrapper--metadata">
......@@ -153,7 +151,7 @@
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="student-training--001__assessment__submit" class="action action--submit is--disabled">
<button type="submit" class="student-training--001__assessment__submit action action--submit is--disabled">
<span class="copy">{% trans "Compare your selections with the instructor's selections" %}</span>
</button>
</li>
......
......@@ -3,8 +3,7 @@
{% load tz %}
{% block list_item %}
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training ui-slidable__container"
<li class="openassessment__steps__step step--student-training ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -2,9 +2,8 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--showing is--incomplete ui-slidable__container
tabindex="-1"">
<li class="openassessment__steps__step step--student-training is--showing is--incomplete ui-slidable__container"
tabindex="-1">
{% endblock %}
{% block button %}
......
......@@ -2,8 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--complete is--empty ui-slidable__container"
<li class="openassessment__steps__step step--student-training is--complete is--empty ui-slidable__container"
tabindex="-1">
{% endblock %}
......
{% extends "openassessmentblock/student_training/student_training.html" %}
{% load i18n %}
{% block list_item %}
<li class="openassessment__steps__step step--student-training is--showing ui-slidable__container is--initially--collapsed {% if allow_latex %}allow--latex{%endif%}"
tabindex="-1">
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled="disabled" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="false" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
{% endblock %}
{% block body %}
......
......@@ -2,8 +2,7 @@
{% load i18n %}
{% block list_item %}
<li id="openassessment__student-training"
class="openassessment__steps__step step--student-training is--empty is--unavailable ui-slidable__container"
<li class="openassessment__steps__step step--student-training is--empty is--unavailable ui-slidable__container"
tabindex="-1">
{% endblock %}
......
......@@ -59,6 +59,8 @@ class MessageMixin(object):
# Default path leads to an "instruction-unavailable" block
# Default context is empty
path, context = 'openassessmentblock/message/oa_message_unavailable.html', {}
context['xblock_id'] = self.get_xblock_id()
return self.render_assessment(path, context)
def render_message_incomplete(self, status, deadline_info):
......
......@@ -45,37 +45,37 @@ logger = logging.getLogger(__name__)
UI_MODELS = {
"submission": {
"name": "submission",
"class_id": "openassessment__response",
"class_id": "step--response",
"title": "Your Response"
},
"student-training": {
"name": "student-training",
"class_id": "openassessment__student-training",
"class_id": "step--student-training",
"title": "Learn to Assess"
},
"peer-assessment": {
"name": "peer-assessment",
"class_id": "openassessment__peer-assessment",
"class_id": "step--peer-assessment",
"title": "Assess Peers' Responses"
},
"self-assessment": {
"name": "self-assessment",
"class_id": "openassessment__self-assessment",
"class_id": "step--self-assessment",
"title": "Assess Your Response"
},
"staff-assessment": {
"name": "staff-assessment",
"class_id": "openassessment__staff-assessment",
"class_id": "step--staff-assessment",
"title": "Staff Grade"
},
"grade": {
"name": "grade",
"class_id": "openassessment__grade",
"class_id": "step--grade",
"title": "Your Grade:"
},
"leaderboard": {
"name": "leaderboard",
"class_id": "openassessment__leaderboard",
"class_id": "step--leaderboard",
"title": "Leaderboard"
}
}
......
......@@ -171,6 +171,7 @@ class StaffAreaMixin(object):
self.get_staff_assessment_statistics_context(student_item["course_id"], student_item["item_id"])
)
context['xblock_id'] = self.get_xblock_id()
return path, context
@staticmethod
......@@ -333,6 +334,7 @@ class StaffAreaMixin(object):
if self.rubric_feedback_default_text is not None:
context['rubric_feedback_default_text'] = self.rubric_feedback_default_text
context['xblock_id'] = self.get_xblock_id()
return context
def get_student_info_path_and_context(self, student_username):
......
......@@ -134,6 +134,7 @@ 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.'),
'step_classes': 'is--initially--collapsed',
'button_active': 'aria-expanded=false',
}
else: # Both student and staff still have work to do, just show "Not Available".
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -9,31 +9,31 @@
"rubric_assessments": [
{
"name": "submission",
"class_id": "openassessment__response",
"class_id": "step--response",
"navigation_text": "Your response to this problem",
"title": "Your Response"
},
{
"name": "peer-assessment",
"class_id": "openassessment__peer-assessment",
"class_id": "step--peer-assessment",
"navigation_text": "Your assessment(s) of peer responses",
"title": "Assess Peers' Responses"
},
{
"name": "self-assessment",
"class_id": "openassessment__self-assessment",
"class_id": "step--self-assessment",
"navigation_text": "Your assessment of your response",
"title": "Assess Your Response"
},
{
"name": "grade",
"class_id": "openassessment__grade",
"class_id": "step--grade",
"navigation_text": "Your grade for this problem",
"title": "Your Grade:"
},
{
"name": "leaderboard",
"class_id": "openassessment__leaderboard",
"class_id": "step--leaderboard",
"navigation_text": "A leaderboard for the top submissions",
"title": "Leaderboard:"
}
......@@ -51,31 +51,31 @@
"rubric_assessments": [
{
"name": "submission",
"class_id": "openassessment__response",
"class_id": "step--response",
"navigation_text": "Your response to this problem",
"title": "Your Response"
},
{
"name": "peer-assessment",
"class_id": "openassessment__peer-assessment",
"class_id": "step--peer-assessment",
"navigation_text": "Your assessment(s) of peer responses",
"title": "Assess Peers' Responses"
},
{
"name": "self-assessment",
"class_id": "openassessment__self-assessment",
"class_id": "step--self-assessment",
"navigation_text": "Your assessment of your response",
"title": "Assess Your Response"
},
{
"name": "grade",
"class_id": "openassessment__grade",
"class_id": "step--grade",
"navigation_text": "Your grade for this problem",
"title": "Your Grade:"
},
{
"name": "leaderboard",
"class_id": "openassessment__leaderboard",
"class_id": "step--leaderboard",
"navigation_text": "A leaderboard for the top submissions",
"title": "Leaderboard:"
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -53,7 +53,7 @@ describe("OpenAssessment.BaseView", function() {
server.renderLatex = jasmine.createSpy('renderLatex');
// Create the object under test
var el = $("#openassessment").get(0);
var el = $(".openassessment").get(0);
view = new OpenAssessment.BaseView(runtime, el, server);
view.load();
expect($(".openassessment__steps__step").hasClass('is--loading')).toBeFalsy();
......
......@@ -41,7 +41,7 @@ describe("OpenAssessment.GradeView", function() {
server = new StubServer();
// Create and install the view
var gradeElement = $('#openassessment__grade').get(0);
var gradeElement = $('.step--grade').get(0);
var baseView = new OpenAssessment.BaseView(runtime, gradeElement, server, {});
view = new OpenAssessment.GradeView(gradeElement, server, baseView);
view.installHandlers();
......
......@@ -40,7 +40,7 @@ describe("OpenAssessment.PeerView", function() {
var createPeerAssessmentView = function(template) {
loadFixtures(template);
var rootElement = $('#openassessment__peer-assessment').parent().get(0);
var rootElement = $('.step--peer-assessment').parent().get(0);
var baseView = new OpenAssessment.BaseView(runtime, rootElement, server, {});
var view = new OpenAssessment.PeerView(rootElement, server, baseView);
view.installHandlers();
......
......@@ -119,7 +119,7 @@ describe("OpenAssessment.ResponseView", function() {
};
// Create and install the view
var responseElement = $('#openassessment__response').get(0);
var responseElement = $('.step--response').get(0);
var baseView = new OpenAssessment.BaseView(runtime, responseElement, server, {});
view = new OpenAssessment.ResponseView(responseElement, server, fileUploader, baseView, data);
view.installHandlers();
......
......@@ -37,7 +37,7 @@ describe("OpenAssessment.SelfView", function() {
server.renderLatex = jasmine.createSpy('renderLatex');
// Create the object under test
var assessmentElement = $("#openassessment__self-assessment").get(0);
var assessmentElement = $(".step--self-assessment").get(0);
var baseView = new OpenAssessment.BaseView(runtime, assessmentElement, server, {});
view = new OpenAssessment.SelfView(assessmentElement, server, baseView);
view.installHandlers();
......
......@@ -96,7 +96,7 @@ describe('OpenAssessment.StaffAreaView', function() {
if (staffAreaTemplate) {
server.staffAreaTemplate = staffAreaTemplate;
}
var assessmentElement = $('#openassessment').get(0);
var assessmentElement = $('.openassessment').get(0);
var baseView = new OpenAssessment.BaseView(runtime, assessmentElement, server, {});
var view = new OpenAssessment.StaffAreaView(assessmentElement, server, baseView);
view.load();
......@@ -130,7 +130,7 @@ describe('OpenAssessment.StaffAreaView', function() {
};
var fillAssessment = function($assessment, type) {
$('#staff-'+ type+ '__assessment__rubric__question--2__feedback', $assessment).val('Text response');
$('#staff-'+ type+ '__assessment__rubric__question--2__feedback__', $assessment).val('Text response');
$('.question__answers', $assessment).each(function() {
$('input[type="radio"]', this).first().click();
});
......
......@@ -43,7 +43,7 @@ describe("OpenAssessment.StudentTrainingView", function() {
server.renderLatex = jasmine.createSpy('renderLatex')
// Create the object under test
var trainingElement = $('#openassessment__student-training').get(0);
var trainingElement = $('.step--student-training').get(0);
var baseView = new OpenAssessment.BaseView(runtime, trainingElement, server, {});
view = new OpenAssessment.StudentTrainingView(trainingElement, server, baseView);
view.installHandlers();
......
......@@ -9,7 +9,7 @@ describe("OpenAssessment.Rubric", function() {
beforeEach(function() {
loadFixtures('oa_rubric.html');
var el = $("#peer-assessment--001__assessment").get(0);
var el = $(".peer-assessment--001__assessment").get(0);
rubric = new OpenAssessment.Rubric(el);
});
......
......@@ -55,11 +55,11 @@ OpenAssessment.BaseView.prototype = {
* import scrollTo, or other dependencies, into workbench.
*
* @param {string} selector optional CSS selector to scroll to. If not supplied,
* the default value of "#openassessment__steps" is used.
* the default value of ".openassessment__steps" is used.
*/
scrollToTop: function(selector) {
if (!selector) {
selector = "#openassessment__steps";
selector = ".openassessment__steps";
}
if ($.scrollTo instanceof Function) {
$(window).scrollTo($(selector, this.element), 800, {offset: -50});
......@@ -96,6 +96,8 @@ OpenAssessment.BaseView.prototype = {
$toggleButton.attr('aria-expanded', 'true');
$container.addClass('is--showing');
}
$container.removeClass('is--initially--collapsed ');
});
});
},
......@@ -172,7 +174,7 @@ OpenAssessment.BaseView.prototype = {
container = '.submission__feedback__actions';
}
else if (type === 'upload') {
container = '#upload__error';
container = '.upload__error';
}
// If we don't have anywhere to put the message, just log it to the console
......@@ -200,7 +202,7 @@ OpenAssessment.BaseView.prototype = {
if (!errorMessage) {
errorMessage = gettext('Unable to load');
}
var $container = $('#openassessment__' + stepName);
var $container = $('.step--' + stepName);
$container.toggleClass('has--error', true);
$container.removeClass('is--showing');
$container.find('.ui-slidable').attr('aria-expanded', 'false');
......
......@@ -19,7 +19,7 @@ OpenAssessment.GradeView.prototype = {
load: function(usageID) {
var view = this;
var baseView = this.baseView;
var stepID = "#openassessment__grade";
var stepID = ".step--grade";
this.server.render('grade').done(
function(html) {
// Load the HTML and install event handlers
......@@ -43,7 +43,7 @@ OpenAssessment.GradeView.prototype = {
*/
installHandlers: function() {
// Install a click handler for collapse/expand
var sel = $('#openassessment__grade', this.element);
var sel = $('.step--grade', this.element);
this.baseView.setUpCollapseExpand(sel);
// Install a click handler for assessment feedback
......@@ -61,10 +61,11 @@ OpenAssessment.GradeView.prototype = {
* @returns {string} The text of the feedback
*/
feedbackText: function(text) {
var usageID = this.baseView.getUsageID() || "";
if (typeof text === 'undefined') {
return $('#feedback__remarks__value', this.element).val();
return $("[id='feedback__remarks__value__" + usageID + "']", this.element).val();
} else {
$('#feedback__remarks__value', this.element).val(text);
$("[id='feedback__remarks__value__" + usageID + "']", this.element).val(text);
}
},
......@@ -76,6 +77,7 @@ OpenAssessment.GradeView.prototype = {
*/
feedbackOptions: function(options) {
var view = this;
var usageID = this.baseView.getUsageID() || "";
if (typeof options === 'undefined') {
return $.map(
$('.feedback__overall__value:checked', view.element),
......@@ -87,7 +89,7 @@ OpenAssessment.GradeView.prototype = {
// Check the selected options
$.each(options, function(index, opt) {
$('#feedback__overall__value--' + opt, view.element).prop('checked', true);
$("[id='feedback__overall__value--" + opt + "__" + usageID + "']", view.element).prop('checked', true);
});
}
},
......
......@@ -22,14 +22,16 @@ OpenAssessment.LeaderboardView.prototype = {
load: function(usageID) {
var view = this;
var baseView = this.baseView;
var stepID = ".step--leaderboard";
this.server.render('leaderboard').done(
function(html) {
// Load the HTML and install event handlers
$('#openassessment__leaderboard', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__leaderboard', view.element));
$(stepID, view.element).replaceWith(html);
view.server.renderLatex($(stepID, view.element));
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__leaderboard", view.element).hasClass("is--showing")) {
$(stepID, view.element).hasClass("is--showing")) {
$("[id='oa_leaderboard_" + usageID + "']", view.element).focus();
}
}
......@@ -43,6 +45,6 @@ OpenAssessment.LeaderboardView.prototype = {
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__leaderboard', this.element));
this.baseView.setUpCollapseExpand($(".step--leaderboard", this.element));
},
};
......@@ -25,8 +25,8 @@ OpenAssessment.MessageView.prototype = {
this.server.render('message').done(
function(html) {
//Load the HTML
$('#openassessment__message', view.element).replaceWith(html);
view.server.renderLatex($('#openassessment__message', view.element));
$('.openassessment__message', view.element).replaceWith(html);
view.server.renderLatex($('.openassessment__message', view.element));
}
).fail(function(errMsg) {
baseView.showLoadError('message', errMsg);
......
......@@ -25,7 +25,7 @@ OpenAssessment.PeerView.prototype = {
**/
load: function(usageID) {
var view = this;
var stepID = "#openassessment__peer-assessment";
var stepID = ".step--peer-assessment";
this.server.render('peer_assessment').done(
function(html) {
// Load the HTML and install event handlers
......@@ -56,8 +56,8 @@ OpenAssessment.PeerView.prototype = {
this.server.renderContinuedPeer().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));
$('.step--peer-assessment', view.element).replaceWith(html);
view.server.renderLatex($('.step--peer-assessment', view.element));
view.installHandlers(true);
if (typeof usageID !== 'undefined') {
$("[id='oa_peer_" + usageID + "']", view.element).focus();
......@@ -98,14 +98,14 @@ OpenAssessment.PeerView.prototype = {
the requirements.
**/
installHandlers: function(isContinuedAssessment) {
var sel = $('#openassessment__peer-assessment', this.element);
var sel = $('.step--peer-assessment', this.element);
var view = this;
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
// Initialize the rubric
var rubricSelector = $("#peer-assessment--001__assessment", this.element);
var rubricSelector = $(".peer-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) {
var rubricElement = rubricSelector.get(0);
this.rubric = new OpenAssessment.Rubric(rubricElement);
......@@ -123,7 +123,7 @@ OpenAssessment.PeerView.prototype = {
}
// Install a click handler for assessment
sel.find('#peer-assessment--001__assessment__submit').click(
sel.find('.peer-assessment--001__assessment__submit').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -159,7 +159,7 @@ OpenAssessment.PeerView.prototype = {
>> true
**/
peerSubmitEnabled: function(enabled) {
var button = $('#peer-assessment--001__assessment__submit', this.element);
var button = $('.peer-assessment--001__assessment__submit', this.element);
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
......@@ -194,7 +194,7 @@ OpenAssessment.PeerView.prototype = {
this.peerAssessRequest(function() {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules(usageID);
baseView.scrollToTop("#openassessment__peer-assessment");
baseView.scrollToTop(".step--peer-assessment");
});
},
......@@ -211,7 +211,7 @@ OpenAssessment.PeerView.prototype = {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
view.loadContinuedAssessment(usageID);
gradeView.load();
baseView.scrollToTop("#openassessment__peer-assessment");
baseView.scrollToTop(".step--peer-assessment");
});
},
......@@ -250,6 +250,6 @@ OpenAssessment.PeerView.prototype = {
**/
getUUID: function() {
var xBlockElement = $("div[data-usage-id='" + this.baseView.getUsageID() + "']");
return xBlockElement.find('#openassessment__peer-assessment').data('submission-uuid');
return xBlockElement.find('.step--peer-assessment').data('submission-uuid');
}
};
......@@ -39,12 +39,13 @@ OpenAssessment.ResponseView.prototype = {
MAX_FILE_SIZE: 5242880,
UNSAVED_WARNING_KEY: "learner-response",
/**
Load the response (submission) view.
**/
load: function(usageID) {
var view = this;
var stepID = '#openassessment__response';
var stepID = '.step--response';
this.server.render('submission').done(
function(html) {
// Load the HTML and install event handlers
......@@ -65,7 +66,7 @@ OpenAssessment.ResponseView.prototype = {
Install event handlers for the view.
**/
installHandlers: function() {
var sel = $('#openassessment__response', this.element);
var sel = $('.step--response', this.element);
var view = this;
var uploadType = '';
if (sel.find('.submission__answer__display__file').length) {
......@@ -82,10 +83,10 @@ OpenAssessment.ResponseView.prototype = {
var handlePrepareUpload = function(eventData) { view.prepareUpload(eventData.target.files, uploadType); };
sel.find('input[type=file]').on('change', handlePrepareUpload);
// keep the preview as display none at first
sel.find('#submission__preview__item').hide();
sel.find('.submission__preview__item').hide();
// Install a click handler for submission
sel.find('#step--response__submit').click(
sel.find('.step--response__submit').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -94,7 +95,7 @@ OpenAssessment.ResponseView.prototype = {
);
// Install a click handler for the save button
sel.find('#submission__save').click(
sel.find('.submission__save').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -103,22 +104,22 @@ OpenAssessment.ResponseView.prototype = {
);
// Install click handler for the preview button
sel.find('#submission__preview').click(
sel.find('.submission__preview').click(
function(eventObject) {
eventObject.preventDefault();
// extract typed-in response and replace newline with br
var previewText = sel.find('.submission__answer__part__text__value').val();
var previewContainer = sel.find('#preview_content');
var previewContainer = sel.find('.preview_content');
previewContainer.html(previewText.replace(/\r\n|\r|\n/g,"<br />"));
// Render in mathjax
sel.find('#submission__preview__item').show();
sel.find('.submission__preview__item').show();
MathJax.Hub.Queue(['Typeset', MathJax.Hub, previewContainer[0]]);
}
);
// Install a click handler for the save button
sel.find('#file__upload').click(
sel.find('.file__upload').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -167,7 +168,7 @@ OpenAssessment.ResponseView.prototype = {
>> true
**/
submitEnabled: function(enabled) {
var sel = $('#step--response__submit', this.element);
var sel = $('.step--response__submit', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
......@@ -195,7 +196,7 @@ OpenAssessment.ResponseView.prototype = {
>> true
**/
saveEnabled: function(enabled) {
var sel = $('#submission__save', this.element);
var sel = $('.submission__save', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
......@@ -209,7 +210,7 @@ OpenAssessment.ResponseView.prototype = {
Works exactly the same way as saveEnabled method.
**/
previewEnabled: function(enabled) {
var sel = $('#submission__preview', this.element);
var sel = $('.submission__preview', this.element);
if (typeof enabled === 'undefined') {
return !sel.hasClass('is--disabled');
} else {
......@@ -227,7 +228,7 @@ OpenAssessment.ResponseView.prototype = {
string: The current status message.
**/
saveStatus: function(msg) {
var sel = $('#response__save_status', this.element);
var sel = $('.response__submission__label', this.element);
if (typeof msg === 'undefined') {
return sel.text();
} else {
......@@ -510,7 +511,7 @@ OpenAssessment.ResponseView.prototype = {
this.baseView.toggleActionError('upload', null);
this.files = files;
}
$("#file__upload").toggleClass("is--disabled", this.files === null);
$(".file__upload").toggleClass("is--disabled", this.files === null);
},
/**
......@@ -521,7 +522,7 @@ OpenAssessment.ResponseView.prototype = {
**/
fileUpload: function() {
var view = this;
var fileUpload = $("#file__upload");
var fileUpload = $(".file__upload");
fileUpload.addClass("is--disabled");
var handleError = function(errMsg) {
......@@ -552,7 +553,7 @@ OpenAssessment.ResponseView.prototype = {
**/
fileUrl: function() {
var view = this;
var file = $('#submission__answer__file', view.element);
var file = $('.submission__answer__file', view.element);
view.server.getDownloadUrl().done(function(url) {
if (file.prop("tagName") === "IMG") {
file.attr('src', url);
......
......@@ -25,7 +25,7 @@ OpenAssessment.SelfView.prototype = {
**/
load: function(usageID) {
var view = this;
var stepID = '#openassessment__self-assessment';
var stepID = '.step--self-assessment';
this.server.render('self_assessment').done(
function(html) {
// Load the HTML and install event handlers
......@@ -46,13 +46,13 @@ OpenAssessment.SelfView.prototype = {
**/
installHandlers: function() {
var view = this;
var sel = $('#openassessment__self-assessment', view.element);
var sel = $('.step--self-assessment', view.element);
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
// Initialize the rubric
var rubricSelector = $("#self-assessment--001__assessment", this.element);
var rubricSelector = $(".self-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) {
var rubricElement = rubricSelector.get(0);
this.rubric = new OpenAssessment.Rubric(rubricElement);
......@@ -70,7 +70,7 @@ OpenAssessment.SelfView.prototype = {
}
// Install a click handler for the submit button
sel.find('#self-assessment--001__assessment__submit').click(
sel.find('.self-assessment--001__assessment__submit').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -97,7 +97,7 @@ OpenAssessment.SelfView.prototype = {
>> true
**/
selfSubmitEnabled: function(enabled) {
var button = $('#self-assessment--001__assessment__submit', this.element);
var button = $('.self-assessment--001__assessment__submit', this.element);
if (typeof enabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
......@@ -142,7 +142,7 @@ OpenAssessment.SelfView.prototype = {
baseView.unsavedWarningEnabled(false, view.UNSAVED_WARNING_KEY);
baseView.loadAssessmentModules(usageID);
view.load(usageID);
baseView.scrollToTop("#openassessment__self-assessment");
baseView.scrollToTop(".step--self-assessment");
}
).fail(function(errMsg) {
baseView.toggleActionError('self', errMsg);
......
......@@ -20,10 +20,10 @@ OpenAssessment.StaffView.prototype = {
var view = this;
this.server.render('staff_assessment').done(
function(html) {
$('#openassessment__staff-assessment', view.element).replaceWith(html);
$('.step--staff-assessment', view.element).replaceWith(html);
view.installHandlers();
if (typeof usageID !== 'undefined' &&
$("#openassessment__staff-assessment", view.element).hasClass("is--showing")) {
$(".step--staff-assessment", view.element).hasClass("is--showing")) {
$("[id='oa_staff_grade_" + usageID + "']", view.element).focus();
}
}
......@@ -37,6 +37,6 @@ OpenAssessment.StaffView.prototype = {
**/
installHandlers: function() {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand($('#openassessment__staff-assessment', this.element));
this.baseView.setUpCollapseExpand($('.step--staff-assessment', this.element));
},
};
......@@ -23,7 +23,7 @@ OpenAssessment.StudentTrainingView.prototype = {
**/
load: function(usageID) {
var view = this;
var stepID = '#openassessment__student-training';
var stepID = '.step--student-training';
this.server.render('student_training').done(
function(html) {
// Load the HTML and install event handlers
......@@ -43,14 +43,14 @@ OpenAssessment.StudentTrainingView.prototype = {
Install event handlers for the view.
**/
installHandlers: function() {
var sel = $("#openassessment__student-training", this.element);
var sel = $(".step--student-training", this.element);
var view = this;
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
// Initialize the rubric
var rubricSelector = $("#student-training--001__assessment", this.element);
var rubricSelector = $(".student-training--001__assessment", this.element);
if (rubricSelector.size() > 0) {
var rubricElement = rubricSelector.get(0);
this.rubric = new OpenAssessment.Rubric(rubricElement);
......@@ -62,7 +62,7 @@ OpenAssessment.StudentTrainingView.prototype = {
}
// Install a click handler for submitting the assessment
sel.find('#student-training--001__assessment__submit').click(
sel.find('.student-training--001__assessment__submit').click(
function(eventObject) {
// Override default form submission
eventObject.preventDefault();
......@@ -89,8 +89,8 @@ OpenAssessment.StudentTrainingView.prototype = {
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);
var incorrect = $(".openassessment__student-training--incorrect", view.element);
var instructions = $(".openassessment__student-training--instructions", view.element);
if (!view.rubric.showCorrections(corrections)) {
view.load(usageID);
......@@ -101,7 +101,7 @@ OpenAssessment.StudentTrainingView.prototype = {
instructions.addClass("is--hidden");
incorrect.removeClass("is--hidden");
}
baseView.scrollToTop("#openassessment__student-training");
baseView.scrollToTop(".step--student-training");
}
).fail(function(errMsg) {
// Display the error
......@@ -128,7 +128,7 @@ OpenAssessment.StudentTrainingView.prototype = {
>> true
**/
assessButtonEnabled: function(isEnabled) {
var button = $('#student-training--001__assessment__submit', this.element);
var button = $('.student-training--001__assessment__submit', this.element);
if (typeof isEnabled === 'undefined') {
return !button.hasClass('is--disabled');
} else {
......
......@@ -47,6 +47,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
@extend %btn-reset;
padding: ($baseline-v/4) ($baseline-v/2);
font-size: 12px;
border-radius: ($baseline-v/4);
text-transform: uppercase;
color: $lighter-base-font-color;
......@@ -212,6 +213,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
width: 0;
padding: 0;
margin: 0;
display: none;
.step__header {
border-bottom: none;
......@@ -229,6 +231,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
width: 0;
padding: 0;
margin: 0;
display: none;
.step__header {
border-bottom: none;
......@@ -1090,76 +1093,77 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
max-width: 100%;
}
#openassessment__leaderboard {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
.step__counter, .step__counter:before {
display: none;
}
.openassessment {
.step--leaderboard {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
.step__title {
.step__title {
.step__counter, .step__counter:before {
display: none;
}
.wrapper--copy{
@include margin-left(0);
@include padding-left(0);
@include border-left(0);
.wrapper--copy {
@include margin-left(0);
@include padding-left(0);
@include border-left(0);
}
}
}
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
}
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
}
.step__label {
@include margin-right(($baseline-h/4));
}
.step__label {
@include margin-right(($baseline-h/4));
}
.leaderboard__title{
@extend %t-superheading;
color: $heading-primary-color;
}
.leaderboard__title {
@extend %t-superheading;
color: $heading-primary-color;
}
.list.leaderboard__score__list{
list-style-type: none;
.list.leaderboard__score__list {
list-style-type: none;
li.leaderboard__score__item {
margin: 15px 0;
li.leaderboard__score__item {
margin: 15px 0;
.leaderboard__list__number{
display: inline-block;
background: $edx-gray-d2;
color: white;
@include padding(5px, 5px, 3px, 5px);
font-size: 16px;
min-width: 35px;
@include text-align(center);
@include border-top-right-radius(2px);
@include border-top-left-radius(2px);
}
.leaderboard__list__number {
display: inline-block;
background: $edx-gray-d2;
color: white;
@include padding(5px, 5px, 3px, 5px);
font-size: 16px;
min-width: 35px;
@include text-align(center);
@include border-top-right-radius(2px);
@include border-top-left-radius(2px);
}
.leaderboard__score__image{
max-height:150px;
max-width:100%;
@include margin-right(20px);
margin-bottom: 20px;
}
.leaderboard__score__image {
max-height: 150px;
max-width: 100%;
@include margin-right(20px);
margin-bottom: 20px;
}
.leaderboard__score__title{
font-size: 15px;
color: $edx-gray-l1;
text-transform: uppercase;
display: inline-block;
@include padding-left(15px);
}
.leaderboard__score__title {
font-size: 15px;
color: $edx-gray-l1;
text-transform: uppercase;
display: inline-block;
@include padding-left(15px);
}
.leaderboard__answer{
border-top: 2px solid $edx-gray-d2;
@include single-box-shadow(0, 0, 3px, 1px, rgba(10, 10, 10, 0.1), inset);
padding: 10px;
max-height: 200px;
overflow-y: scroll;
font-size: 14px;
.leaderboard__answer {
border-top: 2px solid $edx-gray-d2;
@include single-box-shadow(0, 0, 3px, 1px, rgba(10, 10, 10, 0.1), inset);
padding: 10px;
max-height: 200px;
overflow-y: scroll;
font-size: 14px;
}
}
}
}
......
......@@ -162,6 +162,7 @@
padding-bottom: ($baseline-v/4);
.icon {
@extend %icon-1;
display: inline-block;
vertical-align: middle;
}
......
......@@ -20,7 +20,7 @@
.staff-assessment__display__header, .submission__answer__display__header, .student-training__display__header {
margin-bottom: 0 !important;
border-radius: 0 !important;
padding-bottom: 0 !important;
padding-bottom: 2px !important;
font-size: initial !important;
border-bottom: none !important;
}
......@@ -139,10 +139,6 @@
.step--grade .step__title {
width: 100% !important;
.wrapper--copy {
display: block !important;
}
}
// actions
......
......@@ -322,10 +322,6 @@
color: $white-t;
}
}
.step__label {
color: $color-incomplete;
}
}
// STATE: step is unavailable
......@@ -430,7 +426,6 @@
// --------------------
.ui-slidable__container {
.ui-slidable__content {
display: none;
width: 100%;
}
......@@ -441,11 +436,13 @@
@include transform(rotate(bidi-rotate-angle(0deg)));
}
&.is--showing {
&.is--initially--collapsed {
.ui-slidable__content {
display: block;
display: none;
}
}
&.is--showing {
.ui-slidable .icon {
@include transform(rotate(bidi-rotate-angle(90deg)));
@include transform-origin(50% 50%);
......@@ -464,11 +461,9 @@
.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;
......@@ -476,16 +471,16 @@
box-shadow: none;
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:not([disabled]) {
color: $action-primary-color;
&:active, &.is--current {
color: $action-primary-color-active;
&:hover, &:focus {
color: $action-primary-color-focus;
}
}
&:not([disabled]) {
color: $action-primary-color;
.wrapper--copy {
text-align: left;
}
}
}
......@@ -766,19 +761,6 @@
// grade status
// --------------------
// TODO: clean this up - need to make sure counter doens't show when loading or in other states
#openassessment__grade {
.step__counter, .step__counter:before {
display: none;
}
.wrapper--copy {
@include margin-left(0);
@include border-left(none);
@include padding-left(0);
}
}
.step--grade {
.step__title {
......@@ -802,6 +784,16 @@
@include bidi-span-columns(12 of 12);
}
.step__counter, .step__counter:before {
display: none;
}
.wrapper--copy {
@include margin-left(0);
@include border-left(none);
@include padding-left(0);
}
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
......@@ -921,13 +913,18 @@
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/4);
.icon {
@extend %icon-1;
display: inline-block;
vertical-align: middle;
}
}
.question__title__copy {
@extend %t-heading;
@include margin-left(($baseline-h/4));
white-space: pre-wrap;
color: $heading-color;
}
.question__score {
......
......@@ -108,7 +108,7 @@
%btn-reset {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-size: 14px;
-webkit-appearance: none;
background-image: none;
text-shadow: none;
......
......@@ -294,7 +294,7 @@ class TestLeaderboardRender(XBlockHandlerTransactionTestCase):
Check that the leaderboard is displayed in the student view.
"""
fragment = self.runtime.render(xblock, "student_view")
has_leaderboard = 'openassessment__leaderboard' in fragment.body_html()
has_leaderboard = 'step--leaderboard' in fragment.body_html()
self.assertEqual(has_leaderboard, is_visible)
def _clean_score_filenames(self, scores):
......
......@@ -35,29 +35,29 @@ class TestOpenAssessment(XBlockHandlerTestCase):
# Validate Submission Rendering.
submission_response = xblock.render_submission({})
self.assertIsNotNone(submission_response)
self.assertIn("openassessment__response", submission_response.body)
self.assertIn("step--response", submission_response.body)
# Validate Peer Rendering.
request = namedtuple('Request', 'params')
request.params = {}
peer_response = xblock.render_peer_assessment(request)
self.assertIsNotNone(peer_response)
self.assertIn("openassessment__peer-assessment", peer_response.body)
self.assertIn("step--peer-assessment", peer_response.body)
# Validate Self Rendering.
self_response = xblock.render_self_assessment(request)
self.assertIsNotNone(self_response)
self.assertIn("openassessment__self-assessment", self_response.body)
self.assertIn("step--self-assessment", self_response.body)
# Validate Staff Grade.
staff_response = xblock.render_staff_assessment(request)
self.assertIsNotNone(self_response)
self.assertIn("openassessment__staff-assessment", staff_response.body)
self.assertIn("step--staff-assessment", staff_response.body)
# Validate Grading.
grade_response = xblock.render_grade({})
self.assertIsNotNone(grade_response)
self.assertIn("openassessment__grade", grade_response.body)
self.assertIn("step--grade", grade_response.body)
@scenario('data/empty_prompt.xml')
def test_prompt_intentionally_empty(self, xblock):
......@@ -120,7 +120,7 @@ class TestOpenAssessment(XBlockHandlerTestCase):
# Validate Submission Rendering.
submission_response = xblock.render_submission({})
self.assertIsNotNone(submission_response)
self.assertIn("openassessment__response", submission_response.body)
self.assertIn("step--response", submission_response.body)
self.assertIn(expected_date, submission_response.body)
def _set_up_start_date(self, start_date):
......
......@@ -69,6 +69,7 @@ class TestStaffAssessmentRender(StaffAssessmentTestBase):
'you will receive your grade only after you have completed all '
'the required steps of this problem.',
'button_active': 'aria-expanded="false"',
'step_classes': 'is--initially--collapsed',
'xblock_id': xblock.scope_ids.usage_id
}
)
......
......@@ -4,6 +4,7 @@ UI-level acceptance tests for OpenAssessment accessibility.
import os
import unittest
from tests import OpenAssessmentTest, StaffAreaPage, FullWorkflowMixin, MultipleOpenAssessmentMixin
from pages import MultipleAssessmentPage
class OpenAssessmentA11yTest(OpenAssessmentTest):
......@@ -29,8 +30,7 @@ class OpenAssessmentA11yTest(OpenAssessmentTest):
"empty-heading", # TODO: AC-197
"link-href", # TODO: AC-199
"link-name", # TODO: AC-196
"skip-link", # TODO: AC-179,
"duplicate-id", # TODO: TNL-1593
"skip-link", # TODO: AC-179
]
})
page.a11y_audit.check_for_accessibility_errors()
......@@ -253,32 +253,21 @@ class MultipleOpenAssessmentA11yTest(OpenAssessmentA11yTest, MultipleOpenAssessm
super(MultipleOpenAssessmentA11yTest, self).setUp('multiple_ora', staff=True)
# Staff area page is not present in OpenAssessmentTest base class, so we are adding it here.
self.staff_area_page = StaffAreaPage(self.browser, self.problem_loc)
# TODO: remove this method override. See TNL-1593
def _check_a11y(self, page):
page.a11y_audit.config.set_scope(
exclude=[
".container-footer",
".nav-skip",
"#global-navigation",
],
)
page.a11y_audit.config.set_rules({
"ignore": [
"color-contrast", # TODO: AC-198
"empty-heading", # TODO: AC-197
"link-href", # TODO: AC-199
"link-name", # TODO: AC-196
"skip-link", # TODO: AC-179
"duplicate-id",
]
})
page.a11y_audit.check_for_accessibility_errors()
self.multiple_assessment_page = MultipleAssessmentPage(self.browser, self.problem_loc)
def test_multiple_ora_complete_flow(self):
"""
Test accessibility when we have a unit containing multiple ORA blocks.
"""
# Assess entire problem page for potential duplicate IDs among ORA xblocks
self.multiple_assessment_page.a11y_audit.config.set_scope(['#main'])
self.multiple_assessment_page.a11y_audit.config.set_rules({
"apply": [
"duplicate-id"
]
})
self.multiple_assessment_page.a11y_audit.check_for_accessibility_errors()
# Each problem has vertical index assigned and has a `vert-{vertical_index}` top level class.
# That also means that all pages are being differentiated by their vertical index number that is assigned to
# each problem type. We are passing vertical index number and setting it by `self.setup_vertical_index` method
......
......@@ -15,13 +15,10 @@ class PageConfigurationError(Exception):
pass
class OpenAssessmentPage(PageObject):
class BaseAssessmentPage(PageObject):
"""
Base class for ORA page objects.
"""
# vertical index is the index identifier of a problem component on a page.
vertical_index = 0
def __init__(self, browser, problem_location):
"""
Configure a page object for a particular ORA problem.
......@@ -31,9 +28,35 @@ class OpenAssessmentPage(PageObject):
problem_location (unicode): URL path for the problem, appended to the base URL.
"""
super(OpenAssessmentPage, self).__init__(browser)
super(BaseAssessmentPage, self).__init__(browser)
self._problem_location = problem_location
@property
def url(self):
return "{base}/{loc}".format(
base=ORA_SANDBOX_URL,
loc=self._problem_location
)
class MultipleAssessmentPage(BaseAssessmentPage):
"""
Page object for subsection unit containing multiple ORA problems
Does not inherit OpenAssessmentPage object
Used to test accessibility of multiple ORA problems on one page
"""
def is_browser_on_page(self):
# Css is #main to scope the page object to the entire main problem area of a unit
# For testing multiple ORA problems on one page, we don't want to scope it to a particular Xblock
return self.q(css='#main').is_present()
class OpenAssessmentPage(BaseAssessmentPage):
"""
Base class for singular ORA page objects.
"""
# vertical index is the index identifier of a problem component on a page.
vertical_index = 0
def _bounded_selector(self, selector):
"""
Allows scoping to a portion of the page.
......@@ -50,12 +73,6 @@ class OpenAssessmentPage(PageObject):
"""
return ".vert-{vertical_index}".format(vertical_index=self.vertical_index)
@property
def url(self):
return "{base}/{loc}".format(
base=ORA_SANDBOX_URL,
loc=self._problem_location
)
def submit(self, button_css=".action--submit"):
"""
......@@ -86,7 +103,7 @@ class SubmissionPage(OpenAssessmentPage):
"""
def is_browser_on_page(self):
return self.q(css='#openassessment__response').is_present()
return self.q(css='.step--response').is_present()
def submit_response(self, response_text):
"""
......@@ -117,8 +134,8 @@ class SubmissionPage(OpenAssessmentPage):
def preview_latex(self):
# Click 'Preview in LaTeX' button on the page.
self.q(css="button#submission__preview").click()
self.wait_for_element_visibility("#preview_content .MathJax_SVG", "Verify Preview LaTeX expression")
self.q(css="button.submission__preview").click()
self.wait_for_element_visibility(".preview_content .MathJax_SVG", "Verify Preview LaTeX expression")
def select_file(self, file_path_name):
"""
......@@ -127,15 +144,15 @@ class SubmissionPage(OpenAssessmentPage):
Args:
file_path_name (string): full path and name of the file
"""
self.wait_for_element_visibility("#submission__answer__upload", "File select button is present")
self.q(css="#submission__answer__upload").results[0].send_keys(file_path_name)
self.wait_for_element_visibility(".submission__answer__upload", "File select button is present")
self.q(css=".submission__answer__upload").results[0].send_keys(file_path_name)
def upload_file(self):
"""
Upload the selected file
"""
self.wait_for_element_visibility("#file__upload", "Upload button is present")
self.q(css="#file__upload").click()
self.wait_for_element_visibility(".file__upload", "Upload button is present")
self.q(css=".file__upload").click()
@property
def latex_preview_button_is_disabled(self):
......@@ -145,7 +162,7 @@ class SubmissionPage(OpenAssessmentPage):
Returns:
bool
"""
preview_latex_button_class = self.q(css="button#submission__preview").attrs('class')[0]
preview_latex_button_class = self.q(css="button.submission__preview").attrs('class')[0]
return 'is--disabled' in preview_latex_button_class
@property
......@@ -166,7 +183,7 @@ class SubmissionPage(OpenAssessmentPage):
Returns:
bool
"""
return self.q(css="div#upload__error > div.message--error").visible
return self.q(css="div.upload__error > div.message--error").visible
@property
def has_file_uploaded(self):
......@@ -176,14 +193,14 @@ class SubmissionPage(OpenAssessmentPage):
Returns:
bool
"""
return self.q(css="#submission__custom__upload").visible
return self.q(css=".submission__custom__upload").visible
class AssessmentMixin(object):
"""
Mixin for interacting with the assessment rubric.
"""
def assess(self, assessment_type, options_selected):
def assess(self, options_selected):
"""
Create an assessment.
......@@ -199,8 +216,7 @@ class AssessmentMixin(object):
"""
for criterion_num, option_num in enumerate(options_selected):
sel = "#{assessment_type}__assessment__rubric__question--{criterion_num}__{option_num}".format(
assessment_type=assessment_type,
sel = ".rubric_{criterion_num}_{option_num}".format(
criterion_num=criterion_num,
option_num=option_num
)
......@@ -261,14 +277,14 @@ class AssessmentPage(OpenAssessmentPage, AssessmentMixin):
"""
Return `selector`, but limited to this Assignment Page.
"""
return super(AssessmentPage, self)._bounded_selector('#openassessment__{assessment_type} {selector}'.format(
return super(AssessmentPage, self)._bounded_selector('.step--{assessment_type} {selector}'.format(
assessment_type=self._assessment_type, selector=selector))
def is_browser_on_page(self):
css_id = "#openassessment__{assessment_type}".format(
css_class = ".step--{assessment_type}".format(
assessment_type=self._assessment_type
)
return self.q(css=css_id).is_present()
return self.q(css=css_class).is_present()
@property
def is_on_top(self):
......@@ -450,10 +466,10 @@ class GradePage(OpenAssessmentPage):
"""
Return `selector`, but limited to the student grade view.
"""
return super(GradePage, self)._bounded_selector('#openassessment__grade {selector}'.format(selector=selector))
return super(GradePage, self)._bounded_selector('.step--grade {selector}'.format(selector=selector))
def is_browser_on_page(self):
return self.q(css="#openassessment__grade").is_present()
return self.q(css=".step--grade").is_present()
@property
def score(self):
......@@ -621,7 +637,7 @@ class StaffAreaPage(OpenAssessmentPage, AssessmentMixin):
Clicks the staff grade control to expand staff grading section for use in staff required workflows.
"""
self.q(css=self._bounded_selector(".staff__grade__show-form")).first.click()
self.wait_for_element_visibility("#staff-full-grade__assessment__rubric__question--0", "staff grading is present")
self.wait_for_element_visibility(".staff-full-grade__assessment__rubric__question--0", "staff grading is present")
@property
def available_checked_out_numbers(self):
......@@ -733,10 +749,9 @@ class StaffAreaPage(OpenAssessmentPage, AssessmentMixin):
css=self._bounded_selector(".staff-info__student__response .ui-slidable__content")
).text[0]
def staff_assess(self, options_selected, grading_type, continue_after=False):
def staff_assess(self, options_selected, continue_after=False):
for criterion_num, option_num in enumerate(options_selected):
sel = "#staff-{type}__assessment__rubric__question--{criterion_num}__{option_num}".format(
type=grading_type,
sel = ".rubric_{criterion_num}_{option_num}".format(
criterion_num=criterion_num,
option_num=option_num
)
......
......@@ -176,7 +176,7 @@ class OpenAssessmentTest(WebAppTest):
"""
self.self_asmnt_page.wait_for_page().wait_for_response()
self.assertIn(self.SUBMISSION, self.self_asmnt_page.response_text)
self.self_asmnt_page.assess("self", options).wait_for_complete()
self.self_asmnt_page.assess(options).wait_for_complete()
self.assertTrue(self.self_asmnt_page.is_complete)
def _verify_staff_grade_section(self, expected_status, expected_message_title):
......@@ -202,7 +202,7 @@ class OpenAssessmentTest(WebAppTest):
msg = "Did not complete at least {num} student training example(s).".format(num=example_num)
self.fail(msg)
self.student_training_page.wait_for_page().wait_for_response().assess("training", options_selected)
self.student_training_page.wait_for_page().wait_for_response().assess(options_selected)
# Check that we've completed student training
try:
......@@ -221,7 +221,7 @@ class OpenAssessmentTest(WebAppTest):
self.peer_asmnt_page.visit()
for count_assessed in range(1, count + 1):
self.peer_asmnt_page.wait_for_page().wait_for_response().assess("peer", options)
self.peer_asmnt_page.wait_for_page().wait_for_response().assess(options)
self.peer_asmnt_page.wait_for_num_completed(count_assessed)
def do_staff_override(self, username, final_score=STAFF_AREA_SCORE.format(STAFF_OVERRIDE_SCORE)):
......@@ -236,7 +236,7 @@ class OpenAssessmentTest(WebAppTest):
self.staff_area_page.visit()
self.staff_area_page.show_learner(username)
self.staff_area_page.expand_learner_report_sections()
self.staff_area_page.staff_assess(self.STAFF_OVERRIDE_OPTIONS_SELECTED, "override")
self.staff_area_page.staff_assess(self.STAFF_OVERRIDE_OPTIONS_SELECTED)
self.staff_area_page.verify_learner_final_score(final_score)
def do_staff_assessment(self, number_to_assess=0, options_selected=OPTIONS_SELECTED, feedback=None):
......@@ -267,7 +267,7 @@ class OpenAssessmentTest(WebAppTest):
self.staff_area_page.provide_criterion_feedback(feedback("criterion"))
self.staff_area_page.provide_overall_feedback(feedback("overall"))
if options_selected:
self.staff_area_page.staff_assess(options_selected, "full-grade", continue_after)
self.staff_area_page.staff_assess(options_selected, continue_after)
assessed += 1
if not continue_after:
self.staff_area_page.verify_available_checked_out_numbers((ungraded, checked_out-1))
......@@ -620,7 +620,7 @@ class StaffAreaTest(OpenAssessmentTest):
)
# Do staff override and wait for final score to change.
self.staff_area_page.assess("staff-override", self.STAFF_OVERRIDE_OPTIONS_SELECTED)
self.staff_area_page.assess(self.STAFF_OVERRIDE_OPTIONS_SELECTED)
# Verify that the new student score is different from the original one.
self.staff_area_page.verify_learner_final_score(self.STAFF_AREA_SCORE.format(self.STAFF_OVERRIDE_SCORE))
......@@ -720,7 +720,7 @@ class StaffAreaTest(OpenAssessmentTest):
# Learner does required self-assessment
self.self_asmnt_page.wait_for_page().wait_for_response()
self.assertIn(self.SUBMISSION, self.self_asmnt_page.response_text)
self.self_asmnt_page.assess("self", self.OPTIONS_SELECTED).wait_for_complete()
self.self_asmnt_page.assess(self.OPTIONS_SELECTED).wait_for_complete()
self.assertTrue(self.self_asmnt_page.is_complete)
self._verify_staff_grade_section(self.STAFF_GRADE_EXISTS, None)
......@@ -811,7 +811,7 @@ class FullWorkflowMixin(object):
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(),
EmptyPromise(self.submission_page.button(".step--student-training").is_focused(),
"Student training button should be focused")
return username_email
......@@ -824,15 +824,15 @@ 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(),
EmptyPromise(self.submission_page.button(".step--student-training").is_focused(),
"Student training button should be focused")
self.do_training()
EmptyPromise(self.submission_page.button("#openassessment__self-assessment").is_focused(),
EmptyPromise(self.submission_page.button(".step--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(),
EmptyPromise(self.submission_page.button(".step--grade").is_focused(),
"Grade button should be focused")
return username, email
......@@ -1190,7 +1190,7 @@ class FeedbackOnlyTest(OpenAssessmentTest, FullWorkflowMixin):
self.self_asmnt_page.wait_for_page()
self.self_asmnt_page.provide_criterion_feedback(self.generate_feedback("self", "criterion"))
self.self_asmnt_page.provide_overall_feedback(self.generate_feedback("self", "overall"))
self.self_asmnt_page.assess("self", [0])
self.self_asmnt_page.assess([0])
self.self_asmnt_page.wait_for_complete()
self.assertTrue(self.self_asmnt_page.is_complete)
......
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