Skip to content

E
edx-platform
Commit c9807db3 by marco
Options

styling of peer review interface for students along with minimal adjustments to… 

styling of peer review interface for students along with minimal adjustments to the staff grading interface as well. added internationalization of peer grading strings.
parent 3a970d14
Showing with 167 additions and 160 deletions
lms/static/sass/course/_staff_grading.scss
div.staff-grading,
div.peer-grading{
padding: $baseline;
border: none;
border: 1px solid lightgray;
textarea.feedback-area {
margin: 0;
......@@ -37,7 +36,8 @@ div.peer-grading{
&.submission-container{
@include clearfix;
overflow-y: auto;
height: 150px;
height: auto;
max-height: 300px;
border: 1px solid #ddd;
background: #F6F6F6;
}
......@@ -133,12 +133,14 @@ div.peer-grading{
.instructions-panel {
@include clearfix;
margin-right:2px;
padding: $baseline/2;
background-color: #eee;
font-size: .8em;
> div {
margin-bottom: 5px;
padding: 2px;
width: 47.6%;
padding: $baseline/2;
width: 49%;
background: #eee;
h3 {
......@@ -152,18 +154,19 @@ div.peer-grading{
}
}
.calibration-panel {
float: left;
display: inline-block;
width: 20%;
border-radius: 3px;
}
.grading-panel {
float: right;
display: inline-block;
width: 20%;
border-radius: 3px;
}
.current-state {
background: #1d9dd9;
background: #fff;
h3, p {
color: white;
}
}
}
......@@ -186,3 +189,20 @@ div.peer-grading{
}
}
div.peer-grading {
border-radius: $baseline/2;
padding: 0;
.prompt-wrapper {
padding: $baseline;
}
.grading-wrapper {
padding: $baseline;
}
}
div.staff-grading {
padding: $baseline;
}
lms/templates/combinedopenended/combined_open_ended.html
......@@ -11,12 +11,12 @@
<tr>
<td class="problemtype-container">
<div class="problemtype">
Open Response
${_("Open Response")}
</div>
</td>
<td class="assessments-container">
<div class="assessment-text">
Assessments:
${_("Assessments:")}
</div>
<div class="status-container">
${status|n}
......@@ -30,7 +30,7 @@
<div class="visibility-control visibility-control-prompt">
<div class="inner">
</div>
<a href="" class="section-header section-header-prompt question-header">Hide Prompt</a>
<a href="" class="section-header section-header-prompt question-header">${_("Hide Prompt")}</a>
</div>
<div class="problem-container">
% for item in items:
......@@ -38,7 +38,7 @@
% endfor
</div>
<div class="oe-tools response-tools">
<span class="oe-tools-label">Response: </span>
<span class="oe-tools-label">${_("Response: ")}</span>
<input type="button" value="${_('Reset')}" class="reset-button" name="reset"/>
</div>
</div>
......
lms/templates/combinedopenended/combined_open_ended_results.html
......@@ -9,13 +9,13 @@
<div class="visibility-control visibility-control-rubric">
<div class="inner">
</div>
<span class="section-header section-header-rubric">Submitted Rubric</span>
<span class="section-header section-header-rubric">${_("Submitted Rubric")}</span>
</div>
<div class="oe-tools rubric-header">
<span class="oe-tools-label">Rubric: </span>
<button class="rubric-collapse" href="#">Show Score Only</button>
<span class="oe-tools-label">${_("Rubric: ")}</span>
<button class="rubric-collapse" href="#">${_("Show Score Only:")}</button>
<span class="oe-tools-scores">
<span class="oe-tools-scores-label">Scores:</span>
<span class="oe-tools-scores-label">${_("Scores:")}</span>
% if len(results)>1:
<button href="#" alt="Previous" class="rubric-button rubric-previous-button"><i class="icon-chevron-left"></i></button>
% endif
......
lms/templates/instructor/staff_grading.html
......@@ -19,75 +19,69 @@
<div class="staff-grading" data-ajax_url="${ajax_url}">
<h1>${_("Staff grading")}</h1>
<div class="breadcrumbs">
</div>
<div class="error-container">
</div>
<div class="message-container">
</div>
<div class="breadcrumbs"></div>
<div class="error-container"></div>
<div class="message-container"></div>
<! -- Problem List View -->
<section class="problem-list-container">
<h2>${_("Instructions")}</h2>
<div class="instructions">
<p>${_("This is the list of problems that currently need to be graded in order to train the machine learning models. Each problem needs to be trained separately, and we have indicated the number of student submissions that need to be graded in order for a model to be generated. You can grade more than the minimum required number of submissions--this will improve the accuracy of machine learning, though with diminishing returns. You can see the current accuracy of machine learning while grading.")}</p>
</div>
<h2>${_("Problem List")}</h2>
<table class="problem-list">
</table>
<h2>${_("Instructions")}</h2>
<div class="instructions">
<p>${_("This is the list of problems that currently need to be graded in order to train the machine learning models. Each problem needs to be trained separately, and we have indicated the number of student submissions that need to be graded in order for a model to be generated. You can grade more than the minimum required number of submissions--this will improve the accuracy of machine learning, though with diminishing returns. You can see the current accuracy of machine learning while grading.")}</p>
</div>
<h2>${_("Problem List")}</h2>
<table class="problem-list">
</table>
</section>
<!-- Grading View -->
<section class="prompt-wrapper">
<h2 class="prompt-name"></h2>
<div class="meta-info-wrapper">
<div class="problem-meta-info-container">
</div>
<div class="ml-error-info-container">
</div>
</div>
<div class="prompt-information-container">
<h2 class="prompt-name">
</h2>
<div class="meta-info-wrapper">
<div class="problem-meta-info-container">
</div>
<div class="ml-error-info-container">
</div>
</div>
<div class="prompt-information-container">
<h3>${_('Prompt')} <a href="#" class="question-header">${_("(Hide)")}</a></h3>
<div class="prompt-container">
</div>
<div class="prompt-container">
</div>
</div>
</section>
<div class="action-button">
<input type=button value="${_("Submit")}" class="action-button" name="show" />
<input type=button value="${_("Submit")}" class="action-button" name="show" />
</div>
<section class="grading-wrapper">
<div class="grading-container">
<div class="submission-wrapper">
<h3>${_("Student Response")}</h3>
<div class="submission-container">
</div>
</div>
<div class="evaluation">
<p class="score-selection-container">
</p>
<p class="grade-selection-container">
</p>
<h3>${_("Written Feedback")}</h3>
<textarea name="feedback" placeholder="${_("Feedback for student (optional)")}"
class="feedback-area" cols="70" ></textarea>
<p>
${_("Flag as inappropriate content for later review")} <input class="flag-checkbox" type="checkbox" />
</p>
</div>
<div class="submission">
<input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
<input type="button" value="${_("Skip")}" class="skip-button" name="skip"/>
</div>
</div>
</div>
<div class="grading-container">
<div class="submission-wrapper">
<h3>${_("Student Response")}</h3>
<div class="submission-container">
</div>
</div>
<div class="evaluation">
<p class="score-selection-container">
</p>
<p class="grade-selection-container">
</p>
<h3>${_("Written Feedback")}</h3>
<textarea name="feedback" placeholder="${_("Feedback for student (optional)")}" class="feedback-area" cols="70" >
</textarea>
<p>
${_("Flag as inappropriate content for later review")} <input class="flag-checkbox" type="checkbox" />
</p>
</div>
<div class="submission">
<input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
<input type="button" value="${_("Skip")}" class="skip-button" name="skip"/>
</div>
</div>
</div>
</section>
lms/templates/peer_grading/peer_grading_problem.html
......@@ -4,102 +4,95 @@
<div class="error-container"></div>
<section class="content-panel">
<div class="instructions-panel">
<div class="calibration-panel">
<h3>${_("Learning to Grade")}</h3>
</div>
<div class="grading-panel">
<h3>${_("Peer Grading")}</h3>
<div class="instructions-panel">
<div class="calibration-panel">
<h3>${_("Learning to Grade")}</h3>
</div>
<div class="grading-panel">
<h3>${_("Peer Grading")}</h3>
</div>
</div>
</div>
<div class="prompt-wrapper">
<div class="visibility-control visibility-control-rubric">
<div class="inner">
<div class="prompt-wrapper">
<div class="visibility-control visibility-control-rubric">
<div class="inner">
</div>
<span class="section-header section-header-rubric">${_('Hide Prompt')}</span>
</div>
<div class="prompt-information-container">
<section>
<div class="prompt-container">
</div>
</section>
</div>
<span class="section-header section-header-rubric">${_('Hide Prompt')}</span>
</div>
<div class="prompt-information-container">
<section>
<div class="prompt-container">
<section class="grading-wrapper">
<h2>${_("Student Response")}</h2>
<div class="grading-container">
<div class="submission-wrapper">
<h3></h3>
<div class="submission-container">
</div>
<input type="hidden" name="submission-key" value="" />
<input type="hidden" name="essay-id" value="" />
</div>
<div class="evaluation">
<p class="rubric-selection-container"></p>
<p class="score-selection-container"></p>
<h3>${_("Written Feedback")}</h3>
<p>${_("Please include some written feedback as well.")}</p>
<textarea name="feedback" placeholder="Feedback for student" class="feedback-area" cols="70" ></textarea>
<div class="flag-student-container"> ${_("This submission has explicit or pornographic content : ")}
<input type="checkbox" class="flag-checkbox" value="student_is_flagged">
</div>
<div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}
<input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown">
</div>
</div>
<div class="submission">
<input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
</div>
</div>
<div class="grading-message">
</div>
</section>
</section>
<!-- Calibration feedback: Shown after a calibration is sent -->
<section class="calibration-feedback">
<h2>${_("How did I do?")}</h2>
<div class="calibration-feedback-wrapper">
</div>
<input type="button" class="calibration-feedback-button" value="${_("Continue")}" name="calibration-feedback-button" />
</section>
</div>
<!-- Interstitial Page: Shown between calibration and grading steps -->
<section class="interstitial-page">
<h1>${_("Ready to grade!")}</h1>
<p>${_("You have finished learning to grade, which means that you are now ready to start grading.")}</p>
<input type="button" class="interstitial-page-button" value="${_("Start Grading!")}" name="interstitial-page-button" />
</section>
<!-- Calibration Interstitial Page: Shown before calibration -->
<section class="calibration-interstitial-page">
<h1>${_("Learning to grade")}</h1>
<p>${_("You have not yet finished learning to grade this problem.")}</p>
<p>${_("You will now be shown a series of instructor-scored essays, and will be asked to score them yourself.")}</p>
<p>${_("Once you can score the essays similarly to an instructor, you will be ready to grade your peers.")}</p>
<input type="button" class="calibration-interstitial-page-button" value="${_("Start learning to grade")}" name="calibration-interstitial-page-button" />
</section>
<section class="grading-wrapper">
<h2>${_("Student Response")}</h2>
<div class="grading-container">
<div class="submission-wrapper">
<h3></h3>
<div class="submission-container">
<!-- Flag submission confirmation dialog -->
<section class="flag-submission-confirmation">
<h4>${_("Are you sure that you want to flag this submission?")}</h4>
<p>
${_("You are about to flag a submission. You should only flag a submission that contains explicit or offensive content. If the submission is not addressed to the question or is incorrect, you should give it a score of zero and accompanying feedback instead of flagging it.")}
</p>
<div>
<input type="button" class="flag-submission-removal-button" value="${_("Remove Flag")}" name="calibration-interstitial-page-button" />
<input type="button" class="flag-submission-confirmation-button" value="${_("Keep Flag")}" name="calibration-interstitial-page-button" />
</div>
<input type="hidden" name="submission-key" value="" />
<input type="hidden" name="essay-id" value="" />
</div>
<div class="evaluation">
<p class="rubric-selection-container"></p>
<p class="score-selection-container">
</p>
<h3>${_("Written Feedback")}</h3>
<p>${_("Please include some written feedback as well.")}</p>
<textarea name="feedback" placeholder="Feedback for student"
class="feedback-area" cols="70" ></textarea>
<div class="flag-student-container"> ${_("This submission has explicit or pornographic content : ")}<input type="checkbox" class="flag-checkbox" value="student_is_flagged"> </div>
<div class="answer-unknown-container"> ${_("I do not know how to grade this question : ")}<input type="checkbox" class="answer-unknown-checkbox" value="answer_is_unknown"></div>
</div>
<div class="submission">
<input type="button" value="${_("Submit")}" class="submit-button" name="show"/>
</div>
</div>
<div class="grading-message">
</div>
</section>
</section>
<!-- Calibration feedback: Shown after a calibration is sent -->
<section class="calibration-feedback">
<h2>${_("How did I do?")}</h2>
<div class="calibration-feedback-wrapper">
</div>
<input type="button" class="calibration-feedback-button" value="${_("Continue")}" name="calibration-feedback-button" />
</section>
<!-- Interstitial Page: Shown between calibration and grading steps -->
<section class="interstitial-page">
<h1>${_("Ready to grade!")}</h1>
<p>${_("You have finished learning to grade, which means that you are now ready to start grading.")}</p>
<input type="button" class="interstitial-page-button" value="${_("Start Grading!")}" name="interstitial-page-button" />
</section>
<!-- Calibration Interstitial Page: Shown before calibration -->
<section class="calibration-interstitial-page">
<h1>${_("Learning to grade")}</h1>
<p>${_("You have not yet finished learning to grade this problem.")}</p>
<p>${_("You will now be shown a series of instructor-scored essays, and will be asked to score them yourself.")}</p>
<p>${_("Once you can score the essays similarly to an instructor, you will be ready to grade your peers.")}</p>
<input type="button" class="calibration-interstitial-page-button" value="${_("Start learning to grade")}" name="calibration-interstitial-page-button" />
</section>
<!-- Flag submission confirmation dialog -->
<section class="flag-submission-confirmation">
<h4>${_("Are you sure that you want to flag this submission?")}</h4>
<p>
${_("You are about to flag a submission. You should only flag a submission that contains explicit or offensive content. If the submission is not addressed to the question or is incorrect, you should give it a score of zero and accompanying feedback instead of flagging it.")}
</p>
<div>
<input type="button" class="flag-submission-removal-button" value="${_("Remove Flag")}" name="calibration-interstitial-page-button" />
<input type="button" class="flag-submission-confirmation-button" value="${_("Keep Flag")}" name="calibration-interstitial-page-button" />
</div>
</section>
</section>
<input type="button" value="${_("Go Back")}" class="action-button" name="back" />
<input type="button" value="${_("Go Back")}" class="action-button" name="back" />
</div>
</section>
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