MDL-63277 qtype_ddwtos: further improvements to the JavaScript

This commit is contained in:
Tim Hunt
2018-10-20 15:24:49 +01:00
parent 68943aff09
commit c28d0aa113
5 changed files with 672 additions and 789 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
+25 -27
View File
@@ -46,17 +46,8 @@ class qtype_ddwtos_renderer extends qtype_elements_embedded_in_question_text_ren
$result = parent::formulation_and_controls($qa, $options);
$inputids = array();
$question = $qa->get_question();
foreach ($question->places as $placeno => $place) {
$inputids[$placeno] = $this->box_id($qa, $question->field($placeno));
}
$params = array(
'inputids' => $inputids,
'topnode' => 'div.que.ddwtos#q' . $qa->get_slot(),
'readonly' => $options->readonly
);
$PAGE->requires->js_call_amd('qtype_ddwtos/ddwtos', 'init', array($params));
$PAGE->requires->js_call_amd('qtype_ddwtos/ddwtos', 'init',
['q' . $qa->get_slot(), $options->readonly]);
return $result;
}
@@ -72,17 +63,13 @@ class qtype_ddwtos_renderer extends qtype_elements_embedded_in_question_text_ren
}
$classes = array('answercontainer');
if (!$options->readonly) {
$classes[] = 'notreadonly';
} else {
if ($options->readonly) {
$classes[] = 'readonly';
}
$result .= html_writer::tag('div', $dragboxs, array('class' => implode(' ', $classes)));
$classes = array('drags');
if (!$options->readonly) {
$classes[] = 'notreadonly';
} else {
if ($options->readonly) {
$classes[] = 'readonly';
}
$result .= html_writer::tag('div', '', array('class' => implode(' ', $classes)));
@@ -151,8 +138,12 @@ class qtype_ddwtos_renderer extends qtype_elements_embedded_in_question_text_ren
}
/**
* Actually, this question type abuses this method to always ouptut the
* Actually, this question type abuses this method to always output the
* hidden fields it needs.
*
* @param question_attempt $qa the question attempt.
* @param bool $reallyclear whether we are really clearing the responses, or just outputting them.
* @return string HTML to output.
*/
public function clear_wrong(question_attempt $qa, $reallyclear = true) {
$question = $qa->get_question();
@@ -168,30 +159,37 @@ class qtype_ddwtos_renderer extends qtype_elements_embedded_in_question_text_ren
foreach ($question->places as $place => $group) {
$fieldname = $question->field($place);
if (array_key_exists($fieldname, $response)) {
$value = $response[$fieldname];
$value = (string) $response[$fieldname];
} else {
$value = '0';
}
if (array_key_exists($fieldname, $cleanresponse)) {
$cleanvalue = $cleanresponse[$fieldname];
$cleanvalue = (string) $cleanresponse[$fieldname];
} else {
$cleanvalue = '0';
}
if ($cleanvalue != $value) {
if ($cleanvalue === $value) {
// Normal case: just one hidden input, to store the
// current value and be the value submitted.
$output .= html_writer::empty_tag('input', array(
'type' => 'hidden',
'id' => $this->box_id($qa, 'p' . $place),
'class' => 'placeinput place' . $place . ' group' . $group,
'name' => $qa->get_qt_field_name($fieldname),
'value' => s($value)));
} else {
// The case, which only happens when the question is read-only, where
// we want to show the drag item in a given place (first hidden input),
// but when submitted, we want it to go to a different place (second input).
$output .= html_writer::empty_tag('input', array(
'type' => 'hidden',
'id' => $this->box_id($qa, 'p' . $place),
'class' => 'placeinput place' . $place . ' group' . $group,
'value' => s($value))) .
html_writer::empty_tag('input', array(
'type' => 'hidden',
'name' => $qa->get_qt_field_name($fieldname),
'value' => s($cleanvalue)));
} else {
$output .= html_writer::empty_tag('input', array(
'type' => 'hidden',
'id' => $this->box_id($qa, 'p' . $place),
'name' => $qa->get_qt_field_name($fieldname),
'value' => s($value)));
}
}
return $output;
+11 -18
View File
@@ -18,16 +18,15 @@
margin-bottom: 2px;
}
.que.ddwtos .drags {
height: 0;
}
.que.ddwtos .draghome,
.que.ddwtos .drag {
display: inline-block;
text-align: center;
background: transparent;
border: 0;
}
.que.ddwtos .draghome,
.que.ddwtos .drag.unplaced {
border: 1px solid #000;
}
@@ -36,10 +35,16 @@
}
.que.ddwtos .drag {
position: absolute;
z-index: 2;
cursor: move;
}
.que.ddwtos .drag.yui3-dd-dragging {
.que.ddwtos .readonly .drag {
cursor: default;
}
.que.ddwtos .drag.beingdragged {
z-index: 3;
box-shadow: 3px 3px 4px #000;
}
@@ -49,18 +54,6 @@
border-color: #0a0;
box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
}
.que.ddwtos .outside-container {
border-color: #FFA500;
box-shadow: 0 0 5px 5px rgba(255, 200, 50, 1);
}
.que.ddwtos .notreadonly .drag {
cursor: move;
}
.que.ddwtos .readonly .drag {
cursor: default;
}
.que.ddwtos span.incorrect {
background-color: #faa;
@@ -30,7 +30,7 @@ Feature: Preview a drag-drop into text question
And I switch to "questionpreview" window
# Increase window size and wait 2 seconds to ensure elements are placed properly by js.
# Keep window large else drag will scroll the window to find element.
And I change window size to "large"
And I change window size to "medium"
And I wait "2" seconds
And I drag "quick" to space "1" in the drag and drop into text question
And I drag "fox" to space "2" in the drag and drop into text question