Merge branch 'ux/marco/studio-componentsettings' into feature/christina/metadata-ui
This commit is contained in:
cahrens
@@ -124,7 +124,6 @@ code {
|
||||
|
||||
.CodeMirror {
|
||||
font-size: 13px;
|
||||
border: 1px solid $darkGrey;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ body.course.settings {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
.message-status {
|
||||
display: none;
|
||||
@include border-top-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
@@ -13,6 +13,10 @@ body.course.unit {
|
||||
}
|
||||
//end problem selector reqs
|
||||
|
||||
|
||||
// Unit Page Main Column
|
||||
// ====================
|
||||
|
||||
.main-column {
|
||||
clear: both;
|
||||
float: left;
|
||||
@@ -31,6 +35,9 @@ body.course.unit {
|
||||
|
||||
.unit-body {
|
||||
|
||||
// Unit Page Name
|
||||
// ====================
|
||||
|
||||
.unit-name-input {
|
||||
padding: 20px 40px;
|
||||
|
||||
@@ -73,6 +80,10 @@ body.course.unit {
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Component List Meta
|
||||
// ====================
|
||||
// TODO: clean up organization of this page, to many levels/duplication
|
||||
|
||||
.components {
|
||||
|
||||
@@ -81,8 +92,6 @@ body.course.unit {
|
||||
z-index: 10;
|
||||
margin: 20px 40px;
|
||||
|
||||
|
||||
|
||||
.title {
|
||||
margin: 0 0 15px 0;
|
||||
color: $mediumGrey;
|
||||
@@ -91,6 +100,9 @@ body.course.unit {
|
||||
}
|
||||
}
|
||||
|
||||
// New Components
|
||||
// ====================
|
||||
|
||||
&.new-component-item {
|
||||
margin: 20px 0px;
|
||||
border-top: 1px solid $mediumGrey;
|
||||
@@ -355,6 +367,9 @@ body.course.unit {
|
||||
}
|
||||
}
|
||||
|
||||
// Component Drag and Drop, Non-Edit Module Rendering, Styling
|
||||
// ====================
|
||||
|
||||
.component {
|
||||
border: 1px solid $lightBluishGrey2;
|
||||
border-radius: 3px;
|
||||
@@ -410,33 +425,22 @@ body.course.unit {
|
||||
}
|
||||
}
|
||||
|
||||
// Component Editing
|
||||
// ====================
|
||||
|
||||
.wrapper-component-editor {
|
||||
z-index: 9999;
|
||||
position: relative;
|
||||
background: $lightBluishGrey2;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.component-editor {
|
||||
@include edit-box;
|
||||
@include box-shadow(none);
|
||||
display: none;
|
||||
padding: 20px;
|
||||
padding: 0;
|
||||
border-radius: 2px 2px 0 0;
|
||||
|
||||
.metadata_edit {
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 18px;
|
||||
@@ -449,214 +453,270 @@ body.course.unit {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
margin-top: 10px;
|
||||
// Module Actions
|
||||
.module-actions {
|
||||
@include box-shadow(inset 0 1px 1px $shadow);
|
||||
padding: 0px 0 10px 10px;
|
||||
background-color: $gray-l4;
|
||||
|
||||
.save-button {
|
||||
margin: 15px 8px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-settings {
|
||||
.window-contents {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.unit-actions {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
border: 1px solid #edbd3c;
|
||||
border-radius: 3px;
|
||||
background: #fbf6e1;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
|
||||
div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 12px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-button, .view-button {
|
||||
@include white-button;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.publish-button {
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
@include blue-button;
|
||||
}
|
||||
|
||||
.delete-draft {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.preview-button,
|
||||
.publish-button,
|
||||
.view-button {
|
||||
font-size: 11px;
|
||||
margin-top: 10px;
|
||||
padding: 6px 15px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.unit-history {
|
||||
&.collapsed {
|
||||
h4 {
|
||||
border-bottom: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.window-contents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
border: 1px solid #ced2db;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 6px 8px 8px 10px;
|
||||
background: #edf1f5;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
background: #fffcf1;
|
||||
|
||||
.item-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: #d1dae3;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-location {
|
||||
.url {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.draft-tag,
|
||||
.hidden-tag,
|
||||
.private-tag,
|
||||
.has-new-draft-tag {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.window-contents > ol {
|
||||
@include tree-view;
|
||||
|
||||
.section-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
ol {
|
||||
.section-item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol {
|
||||
.section-item {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin: 0 0 10px 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-draft {
|
||||
.visibility,
|
||||
|
||||
.edit-draft-message,
|
||||
.view-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-public {
|
||||
.delete-draft,
|
||||
.component-actions,
|
||||
.new-component-item,
|
||||
.editing-draft-alert,
|
||||
.publish-draft-message,
|
||||
.preview-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-private {
|
||||
.delete-draft,
|
||||
.publish-draft,
|
||||
.editing-draft-alert,
|
||||
.create-draft,
|
||||
.view-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// editing units from courseware
|
||||
// Edit Header (Component Name, Mode-Editor, Mode-Settings)
|
||||
|
||||
.component-edit-header {
|
||||
@include box-sizing(border-box);
|
||||
padding: 15px 0 15px 20px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
box-shadow: 0 1px 2px rgba(182, 182, 182, 0.75) inset;
|
||||
|
||||
//Component Name
|
||||
.component-name {
|
||||
@extend .t-copy-sub1;
|
||||
color: $white;
|
||||
width: 50%;
|
||||
|
||||
em {
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//Nav-Edit Modes
|
||||
.nav-edit-modes {
|
||||
list-style: none;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
|
||||
.mode {
|
||||
display: inline-block;
|
||||
|
||||
.inactive-mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.active-mode {
|
||||
@include blue-button;
|
||||
}
|
||||
|
||||
.is-set {
|
||||
@include linear-gradient($blue, $blue);
|
||||
box-shadow: inset 0 0 3px $shadow;
|
||||
background-color: $blue;
|
||||
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 3px $shadow;
|
||||
background-color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Editor Wrapper
|
||||
.wrapper-comp-editor {
|
||||
//TO-DO
|
||||
}
|
||||
|
||||
// Settings Wrapper
|
||||
.wrapper-comp-settings {
|
||||
|
||||
//settings-list
|
||||
.list-input.settings-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
|
||||
//chrome scrollbar visibility correction
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
border: 2px solid $gray-l2;
|
||||
background-color: rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
//component-setting-entry
|
||||
.field.comp-setting-entry {
|
||||
//margin: 0 0 $baseline 0; WILL BE REMOVED PRIOR TO PUSH
|
||||
background-color: $white;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid $gray-l2;
|
||||
opacity: .6;
|
||||
|
||||
&:last-child {
|
||||
//margin-bottom: 0;
|
||||
}
|
||||
|
||||
//no required component settings currently
|
||||
&.required {
|
||||
label {
|
||||
//font-weight: 600;
|
||||
}
|
||||
label:after {
|
||||
//margin-left: ($baseline/4);
|
||||
//content: "*";
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
//TO-DO review existing patterns for hover on field
|
||||
@include transition(opacity 0.25s ease-in-out);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.is-set {
|
||||
opacity: 1;
|
||||
background-color: $white;
|
||||
|
||||
//setting-label
|
||||
.setting-label {
|
||||
//color: $blue-l1;
|
||||
}
|
||||
|
||||
//setting-input
|
||||
.setting-input {
|
||||
color: $blue-l1;
|
||||
}
|
||||
|
||||
//setting-clear
|
||||
.setting-clear {
|
||||
//...
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-comp-setting{
|
||||
display: inline-block;
|
||||
width: 360px;
|
||||
top: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
label.setting-label {
|
||||
@extend .t-copy-sub1;
|
||||
@include transition(color, 0.15s, ease-in-out);
|
||||
//margin: 0 0 ($baseline/4) 0; WILL BE REMOVED PRIOR TO PUSH
|
||||
font-weight: 400;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 0;
|
||||
min-width: 100px;
|
||||
width: 35%;
|
||||
|
||||
&.is-focused {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
input, select {
|
||||
@include placeholder($gray-l4);
|
||||
@include font-size(16);
|
||||
@include size(100%,100%);
|
||||
padding: ($baseline/2);
|
||||
min-width: 100px;
|
||||
width: 45%;
|
||||
|
||||
//&.long {
|
||||
//
|
||||
//}
|
||||
|
||||
//&.short {
|
||||
//}
|
||||
|
||||
//&.error {
|
||||
// border-color: $red;
|
||||
//}
|
||||
|
||||
//&:focus {
|
||||
// + .tip {
|
||||
// color: $gray;
|
||||
// }
|
||||
border-radius: 3px;
|
||||
border: 1px solid $gray-l2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
select {
|
||||
//border: 1px solid $gray-l2;
|
||||
background: none repeat scroll #F2F2F2;
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow(0 0 1px $shadow);
|
||||
@include transition(opacity 0.25s ease-in-out);
|
||||
background-color: #FFFCF1;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #FFFCF1;
|
||||
}
|
||||
}
|
||||
|
||||
//input[type=others]
|
||||
|
||||
.action.setting-clear {
|
||||
@include font-size(11);
|
||||
color: $gray;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
vertical-align: middle;
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
margin: 0 10px;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
border: 1px solid $gray-l4;
|
||||
|
||||
&:hover {
|
||||
@include box-shadow(0 1px 1px $shadow);
|
||||
@include transition(opacity 0.25s ease-in-out);
|
||||
background-color: $blue-s3;
|
||||
border: 1px solid $blue-s3;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
tip.setting-help {
|
||||
@include font-size(12);
|
||||
display: inline-block;
|
||||
font-color: $gray-l6;
|
||||
//max-width: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Editing Units from Courseware
|
||||
// ====================
|
||||
|
||||
body.unit {
|
||||
|
||||
.component {
|
||||
@@ -678,3 +738,222 @@ body.unit {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Unit Page Sidebar
|
||||
// ====================
|
||||
|
||||
.unit-settings {
|
||||
.window-contents {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.unit-actions {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
border: 1px solid #edbd3c;
|
||||
border-radius: 3px;
|
||||
background: #fbf6e1;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
|
||||
div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 12px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-button, .view-button {
|
||||
@include white-button;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.publish-button {
|
||||
@include orange-button;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
@include blue-button;
|
||||
}
|
||||
|
||||
.delete-draft {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-button,
|
||||
.preview-button,
|
||||
.publish-button,
|
||||
.view-button {
|
||||
font-size: 11px;
|
||||
margin-top: 10px;
|
||||
padding: 6px 15px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.unit-history {
|
||||
&.collapsed {
|
||||
h4 {
|
||||
border-bottom: none;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.window-contents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
border: 1px solid #ced2db;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
padding: 6px 8px 8px 10px;
|
||||
background: #edf1f5;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
background: #fffcf1;
|
||||
|
||||
.item-actions {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
background: #d1dae3;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.unit-location {
|
||||
.url {
|
||||
@include box-shadow(none);
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.draft-tag,
|
||||
.hidden-tag,
|
||||
.private-tag,
|
||||
.has-new-draft-tag {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.window-contents > ol {
|
||||
@include tree-view;
|
||||
|
||||
.section-item {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px 4px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ol {
|
||||
.section-item {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ol ol {
|
||||
.section-item {
|
||||
padding-left: 34px;
|
||||
}
|
||||
|
||||
.new-unit-item {
|
||||
margin: 0 0 10px 41px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-draft {
|
||||
.visibility,
|
||||
|
||||
.edit-draft-message,
|
||||
.view-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-public {
|
||||
.delete-draft,
|
||||
.component-actions,
|
||||
.new-component-item,
|
||||
.editing-draft-alert,
|
||||
.publish-draft-message,
|
||||
.preview-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.published-alert {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.edit-state-private {
|
||||
.delete-draft,
|
||||
.publish-draft,
|
||||
.editing-draft-alert,
|
||||
.create-draft,
|
||||
.view-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//OLD Meta-data Styling
|
||||
//TO-DO port over old styling
|
||||
.metadata_edit {
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,183 @@
|
||||
<div class="wrapper wrapper-component-editor">
|
||||
<div class="component-editor">
|
||||
<div class="module-editor">
|
||||
${editor}
|
||||
</div>
|
||||
<div class="row module-actions">
|
||||
<a href="#" class="save-button">Save</a>
|
||||
<a href="#" class="cancel-button">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-edit-header">
|
||||
<span class="component-name"><em>Editing:</em> Name of Component</span>
|
||||
<!--should this be a menubar/menu/tabbar instead of list? -->
|
||||
<ul class="nav-edit-modes">
|
||||
<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
|
||||
<a href="#" class="active-mode is-set">Editor</a>
|
||||
</li>
|
||||
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
|
||||
<a href="#" class="inactive-mode">Compiler </a>
|
||||
</li>
|
||||
<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
|
||||
<a href="#" class="active-mode">Settings </a>
|
||||
</li>
|
||||
</ul>
|
||||
</div> <!-- Editor Header -->
|
||||
|
||||
<div class="component-edit-modes">
|
||||
<div class="module-editor wrapper-comp-editor" id="editor-tab">
|
||||
<!--${editor}-->
|
||||
<!-- no longer are settings imported from metadata-edit.hmtl, ideally? -->
|
||||
</div> <!-- Editor Wrapper-->
|
||||
<div class="wrapper-comp-settings" id="settings-tab">
|
||||
<ul class="list-input settings-list">
|
||||
<!--% for type in sorted(something.keys()):-->
|
||||
|
||||
<!--is-set class applied when user sets value-->
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-accept_file_upload">Accept File Upload</label>
|
||||
<select class="input setting-input" id="setting-accept_file_upload" name="Accept File Upload">
|
||||
<!--% for all in available options -->
|
||||
<option value="True">True</option>
|
||||
<option value="False" selected>False</option>
|
||||
</select>
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">If disabled, students cannot upload images to be graded with this problem.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-skip_spelling_checks">Basic Quality Filter</label>
|
||||
<select class="input setting-input" id="setting-skip_spelling_checks" name="Basic Quality Filter">
|
||||
<!--% for all in available options -->
|
||||
<option value="True" selected>True</option>
|
||||
<option value="False">False</option>
|
||||
</select>
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">If enabled, submissions with poor spelling, short length, or poor grammar won't be peer reviewed.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-discussion_category">Discussion Area</label>
|
||||
<input class="input setting-input" type="text" id="setting-discussion_category" value="Defined by Course Template"/>
|
||||
<!--button clickable if is-set -->
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">This value specifies the discussion are where this component lives, organized in the left pane of the discussion forum for your course. </span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-display_name">Display Name</label>
|
||||
<input class="input setting-input" type="text" id="setting-display_name" placeholder="Unnamed Component"/>
|
||||
<!--button clickable if is-set -->
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">This value defines the name of this component, and is shown to students as a tooltip. </span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-is_graded">Graded</label>
|
||||
<select class="input setting-input" id="setting-is_graded" name="Graded">
|
||||
<!--% for all in available options -->
|
||||
<option value="True">True</option>
|
||||
<option value="False" selected>False</option>
|
||||
</select>
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">If disabled, this problem will not be graded.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-weight">Problem Weight</label>
|
||||
<input class="input setting-input" type="number" id="setting-weight" placeholder="Not set"/>
|
||||
<!--button clickable if is-set -->
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">This value ....needs helpstring....</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-rerandomize">Randomization</label>
|
||||
<select class="input setting-input" id="setting-rerandomize" name="Randomization">
|
||||
<!--% for all in available options -->
|
||||
<option value="always" selected>Always</option>
|
||||
<!--in case value already defaulted -->
|
||||
<option value="onreset">On Reset</option>
|
||||
<option value="never">Never</option>
|
||||
<option value="per_student">Per Student</option>
|
||||
</select>
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">Choose from a few different ways to incorporate randomization into this problem.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-showanswer">Show Answer</label>
|
||||
<select class="input setting-input" id="setting-showanswer" name="Show Answer">
|
||||
<!--% for all in available options -->
|
||||
<option value="never">Never</option>
|
||||
<option value="closed" selected>Closed</option>
|
||||
<option value="attempted">Attempted</option>
|
||||
<option value="answered" Answered>Closed</option>
|
||||
<option value="always">Always</option>
|
||||
</select>
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">Choose from a few different options to define whether students interact with the problem's answer. (info icon here) You can define this for every problem in a course.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-sort_key">Sort Order Key</label>
|
||||
<input class="input setting-input" type="text" id="setting-sort_key" placeholder="Not set"/>
|
||||
<!--button clickable if is-set -->
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">You can specify the order of discussion areas in the discussion dropdown menu. Their order is alphabetical, but uses the sort key value instead of their name.</span>
|
||||
</li>
|
||||
|
||||
<li class="field comp-setting-entry">
|
||||
<div class="wrapper-comp-setting">
|
||||
<label class="label setting-label" for="setting-discussion_target">Subcategory (RENAME?)</label>
|
||||
<input class="input setting-input" type="text" id="setting-discussion_target" value="Week 1 - Defined by Course Template"/>
|
||||
<!--button clickable if is-set -->
|
||||
<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
|
||||
<i class="ss-icon ss-symbolicons-block undo">↩</i>
|
||||
</button>
|
||||
</div>
|
||||
<span class="tip setting-help">Specify a subcategory name for this discussion. This name appears in the left pane of the discussion forum for your course.</span>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</div> <!-- Settings Wrapper-->
|
||||
</div>
|
||||
<div class="row module-actions">
|
||||
<a href="#" class="save-button">Save</a>
|
||||
<a href="#" class="cancel-button">Cancel</a>
|
||||
</div> <!-- Module Actions-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="component-actions">
|
||||
|
||||
Reference in New Issue
Block a user