Updating icons on problem type editor

This commit is contained in:
Chris Rodriguez
2016-01-06 10:23:12 -05:00
parent 81d86eea42
commit 4ae40e7bdd
33 changed files with 292 additions and 155 deletions

View File

@@ -13,14 +13,21 @@
padding: ($baseline/4);
border-bottom-color: #a5aaaf;
a {
display: block;
button {
display: inline-block;
@include float(left);
padding: 3px ($baseline/2) 7px;
padding: 3px ($baseline/2) 5px;
margin-left: 7px;
border: 0;
border-radius: 2px;
background: transparent;
&:hover, &:focus {
.icon {
height: 21px;
}
&:hover,
&:focus {
background: rgba(255, 255, 255, .5);
}
}
@@ -60,4 +67,4 @@
}
}
}
}
}

View File

@@ -7,6 +7,7 @@
margin-top: -4px;
padding: 3px 9px;
font-size: 12px;
color: $link-color;
&.current {
border: 1px solid $lightGrey !important;
@@ -16,7 +17,8 @@
pointer-events: none;
cursor: none;
&:hover, &:focus {
&:hover,
&:focus {
box-shadow: 0 0 0 0 !important;
background-color: $white;
}
@@ -79,11 +81,15 @@
}
.col {
float: left;
display: block;
&.sample {
width: 60px;
margin-right: 30px;
.icon {
height: ($baseline * 1.5);
}
}
}
@@ -110,40 +116,5 @@
width: 26px;
height: 21px;
vertical-align: middle;
background: url('#{$static-path}/images/problem-editor-icons.png') no-repeat;
color: $base-font-color;
}
.problem-editor-icon.heading1 {
width: 18px;
background-position: -265px 0;
}
.problem-editor-icon.multiple-choice {
background-position: 0 0;
}
.problem-editor-icon.checks {
background-position: -56px 0;
}
.problem-editor-icon.string {
width: 28px;
background-position: -111px 0;
}
.problem-editor-icon.number {
width: 24px;
background-position: -168px 0;
}
.problem-editor-icon.dropdown {
width: 17px;
background-position: -220px 0;
}
.problem-editor-icon.explanation {
width: 17px;
background-position: -307px 0;
}

View File

@@ -10,7 +10,7 @@
<h3 class="problem-header">
Numerical Input
</h3>
</h3>
<section class="problem-progress">(1/1 point)</section>

View File

@@ -258,9 +258,9 @@ describe 'MarkdownEditingDescriptor', ->
</problem>""")
it 'converts multiple choice shuffle to xml', ->
data = MarkdownEditingDescriptor.markdownToXml("""A multiple choice problem presents radio buttons for student input. Students can only select a single option presented. Multiple Choice questions have been the subject of many areas of research due to the early invention and adoption of bubble sheets.
One of the main elements that goes into a good multiple choice question is the existence of good distractors. That is, each of the alternate responses presented to the student should be the result of a plausible mistake that a student might make.
What Apple device competed with the portable CD player?
(!x@) The iPad
(@) Napster
@@ -268,16 +268,16 @@ describe 'MarkdownEditingDescriptor', ->
( ) The vegetable peeler
( ) Android
(@) The Beatles
[Explanation]
The release of the iPod allowed consumers to carry their entire music library with them in a format that did not rely on fragile and energy-intensive spinning disks.
[Explanation]
""")
expect(data).toEqual("""<problem>
<p>A multiple choice problem presents radio buttons for student input. Students can only select a single option presented. Multiple Choice questions have been the subject of many areas of research due to the early invention and adoption of bubble sheets.</p>
<p>One of the main elements that goes into a good multiple choice question is the existence of good distractors. That is, each of the alternate responses presented to the student should be the result of a plausible mistake that a student might make.</p>
<p>What Apple device competed with the portable CD player?</p>
<multiplechoiceresponse>
<choicegroup type="MultipleChoice" shuffle="true">
@@ -289,11 +289,11 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="false" fixed="true">The Beatles</choice>
</choicegroup>
</multiplechoiceresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>The release of the iPod allowed consumers to carry their entire music library with them in a format that did not rely on fragile and energy-intensive spinning disks.</p>
</div>
@@ -326,7 +326,7 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="false">c</choice>
</choicegroup>
</multiplechoiceresponse>
<p>yatta</p>
<multiplechoiceresponse>
<choicegroup type="MultipleChoice">
@@ -335,7 +335,7 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="true">z</choice>
</choicegroup>
</multiplechoiceresponse>
<p>testa</p>
<multiplechoiceresponse>
<choicegroup type="MultipleChoice" shuffle="true">
@@ -344,13 +344,13 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="true">iii</choice>
</choicegroup>
</multiplechoiceresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>When the student is ready, the explanation appears.</p>
</div>
</solution>
</problem>""")
@@ -513,25 +513,25 @@ describe 'MarkdownEditingDescriptor', ->
<stringresponse answer="w*.?s*Luther Kings*.*" type="ci regexp" >
<textline label="Who lead the civil right movement in the United States of America?" size="20"/>
</stringresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>Test Explanation.</p>
</div>
</solution>
</problem>""")
it 'handles multiple questions with labels', ->
data = MarkdownEditingDescriptor.markdownToXml("""
France is a country in Europe.
>>What is the capital of France?<<
= Paris
Germany is a country in Europe, too.
>>What is the capital of Germany?<<
( ) Bonn
( ) Hamburg
@@ -540,14 +540,14 @@ describe 'MarkdownEditingDescriptor', ->
""")
expect(data).toEqual("""<problem>
<p>France is a country in Europe.</p>
<p>What is the capital of France?</p>
<stringresponse answer="Paris" type="ci" >
<textline label="What is the capital of France?" size="20"/>
</stringresponse>
<p>Germany is a country in Europe, too.</p>
<p>What is the capital of Germany?</p>
<multiplechoiceresponse>
<choicegroup label="What is the capital of Germany?" type="MultipleChoice">
@@ -557,8 +557,8 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="false">Donut</choice>
</choicegroup>
</multiplechoiceresponse>
</problem>""")
it 'tests multiple questions with only one label', ->
data = MarkdownEditingDescriptor.markdownToXml("""
@@ -577,14 +577,14 @@ describe 'MarkdownEditingDescriptor', ->
""")
expect(data).toEqual("""<problem>
<p>France is a country in Europe.</p>
<p>What is the capital of France?</p>
<stringresponse answer="Paris" type="ci" >
<textline label="What is the capital of France?" size="20"/>
</stringresponse>
<p>Germany is a country in Europe, too.</p>
<p>What is the capital of Germany?</p>
<multiplechoiceresponse>
<choicegroup type="MultipleChoice">
@@ -594,8 +594,8 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="false">Donut</choice>
</choicegroup>
</multiplechoiceresponse>
</problem>""")
it 'tests malformed labels', ->
data = MarkdownEditingDescriptor.markdownToXml("""
@@ -612,12 +612,12 @@ describe 'MarkdownEditingDescriptor', ->
""")
expect(data).toEqual("""<problem>
<p>France is a country in Europe.</p>
<p>>>What is the capital of France?<</p>
<stringresponse answer="Paris" type="ci" >
<textline size="20"/>
</stringresponse>
<p>blahWhat is the capital of Germany?</p>
<multiplechoiceresponse>
<choicegroup label="What is the capital of &lt;&lt;Germany?" type="MultipleChoice">
@@ -627,8 +627,8 @@ describe 'MarkdownEditingDescriptor', ->
<choice correct="false">Donut</choice>
</choicegroup>
</multiplechoiceresponse>
</problem>""")
it 'adds labels to formulae', ->
data = MarkdownEditingDescriptor.markdownToXml("""
@@ -641,8 +641,8 @@ describe 'MarkdownEditingDescriptor', ->
<responseparam type="tolerance" default=".02" />
<formulaequationinput label="Enter the numerical value of Pi:" />
</numericalresponse>
</problem>""")
it 'escapes entities in labels', ->
data = MarkdownEditingDescriptor.markdownToXml("""
@@ -654,8 +654,8 @@ describe 'MarkdownEditingDescriptor', ->
<stringresponse answer="Paris" type="ci" >
<textline label="What is the &quot;capital&quot; of France &amp; the &apos;best&apos; &gt; place &lt; to live&quot;?" size="20"/>
</stringresponse>
</problem>""")
# test oddities
it 'converts headers and oddities to xml', ->
@@ -710,7 +710,7 @@ describe 'MarkdownEditingDescriptor', ->
""")
expect(data).toEqual("""<problem>
<p>Not a header</p>
<h1>A header</h1>
<h3 class="problem-header">A header</h3>
<p>Multiple choice w/ parentheticals</p>
<multiplechoiceresponse>

View File

@@ -23,7 +23,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
@setCurrentEditor(@markdown_editor)
# Add listeners for toolbar buttons (only present for markdown editor)
@element.on('click', '.xml-tab', @onShowXMLButton)
@element.on('click', '.format-buttons a', @onToolbarButton)
@element.on('click', '.format-buttons button', @onToolbarButton)
@element.on('click', '.cheatsheet-toggle', @toggleCheatsheet)
# Hide the XML text area
$(@element.find('.xml-box')).hide()
@@ -131,7 +131,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
###
save: ->
@element.off('click', '.xml-tab', @changeEditor)
@element.off('click', '.format-buttons a', @onToolbarButton)
@element.off('click', '.format-buttons button', @onToolbarButton)
@element.off('click', '.cheatsheet-toggle', @toggleCheatsheet)
if @current_editor == @markdown_editor
{
@@ -202,7 +202,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
xml = xml.replace(/\r\n/g, '\n');
// replace headers
xml = xml.replace(/(^.*?$)(?=\n\=\=+$)/gm, '<h1>$1</h1>');
xml = xml.replace(/(^.*?$)(?=\n\=\=+$)/gm, '<h3 class="problem-header">$1</h3>');
xml = xml.replace(/\n^\=\=+$/gm, '');
// Pull out demand hints, || a hint ||

View File

@@ -293,9 +293,9 @@ function (VideoPlayer, i18n, moment) {
_hideWaitPlaceholder(state);
state.el
.find('.video-player div')
.addClass('hidden')
.end()
.find('.video-player h3')
.addClass('hidden');
state.el
.find('.video-player .video-error')
.removeClass('hidden');
return false;
@@ -497,7 +497,7 @@ function (VideoPlayer, i18n, moment) {
this.el.find('.video-player div')
.removeClass('hidden');
this.el.find('.video-player h3')
this.el.find('.video-player .video-error')
.addClass('hidden');
// If in reality the timeout was to short, try to
@@ -510,7 +510,7 @@ function (VideoPlayer, i18n, moment) {
// In-browser HTML5 player does not support quality
// control.
this.el.find('a.quality_control').hide();
this.el.find('.quality_control').hide();
_renderElements(this);
}
}

View File

@@ -99,7 +99,7 @@ function () {
.find('.video-player div')
.addClass('hidden')
.end()
.find('.video-player h3')
.find('.video-player .video-error')
.removeClass('hidden')
.end()
.addClass('is-initialized')
@@ -125,7 +125,7 @@ function () {
this.el
.find('.video-player div').removeClass('hidden')
.end()
.find('.video-player h3').addClass('hidden')
.find('.video-player .video-error').addClass('hidden')
.end().removeClass('is-initialized')
.find('.spinner').attr({'aria-hidden': 'false'});
this.videoEl.remove();