mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-13 12:32:08 +02:00
Code Issues Projects Releases Wiki Activity

MDL-61138 mod_quiz: add question preview to random question modal

Browse Source
This commit is contained in:
Ryan Wyllie 2018-03-21 15:36:55 +08:00
parent 6768729e08
commit 1c26b3143d
9 changed files with 573 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
mod/quiz/addrandomform.php
View File

@ -37,6 +37,8 @@ require_once($CFG->libdir.'/formslib.php');
class quiz_add_random_form extends moodleform {
protected function definition() {
global $OUTPUT, $PAGE;
$mform =& $this->_form;
$mform->setDisableShortforms();
@ -71,6 +73,9 @@ class quiz_add_random_form extends moodleform {
$mform->addElement('select', 'numbertoadd', get_string('randomnumber', 'quiz'),
$this->get_number_of_questions_to_add_choices());
$previewhtml = $OUTPUT->render_from_template('mod_quiz/random_question_form_preview', []);
$mform->addElement('html', $previewhtml);
$mform->addElement('submit', 'existingcategory', get_string('addrandomquestion', 'quiz'));
// Random from a new category section.
@ -97,6 +102,12 @@ class quiz_add_random_form extends moodleform {
$mform->setType('cmid', PARAM_INT);
$mform->addElement('hidden', 'returnurl', 0);
$mform->setType('returnurl', PARAM_LOCALURL);
// Add the javascript required to enhance this mform.
$PAGE->requires->js_call_amd('mod_quiz/add_random_form', 'init', [
$mform->getAttribute('id'),
$contexts->lowest()->id
]);
}
public function validation($fromform, $files) {

1
mod/quiz/amd/build/add_random_form.min.js vendored Normal file
View File

@ -0,0 +1 @@
define(["jquery","mod_quiz/random_question_form_preview"],function(a,b){var c=2e3,d={PREVIEW_CONTAINER:'[data-region="random-question-preview-container"]',CATEGORY_FORM_ELEMENT:'[name="category"]',SUBCATEGORY_FORM_ELEMENT:'[name="includesubcategories"]',TAG_IDS_FORM_ELEMENT:'[name="fromtags[]"]'},e=function(a){var b=a.find(d.CATEGORY_FORM_ELEMENT).val(),c=b.split(",");return c[0]},f=function(a){return a.find(d.SUBCATEGORY_FORM_ELEMENT).is(":checked")},g=function(a){var b=a.find(d.TAG_IDS_FORM_ELEMENT).val();return b.map(function(a){var b=a.split(",");return b[0]})},h=function(a,c){var h=a.find(d.PREVIEW_CONTAINER);b.reload(h,e(a),f(a),g(a),c)},i=function(a){return a.closest(d.CATEGORY_FORM_ELEMENT).length>0||(a.closest(d.SUBCATEGORY_FORM_ELEMENT).length>0||a.closest(d.TAG_IDS_FORM_ELEMENT).length>0)},j=function(d,e){var f=null;d.on("change",function(g){i(a(g.target))&&(b.showLoadingIcon(d),f&&clearTimeout(f),f=setTimeout(function(){h(d,e)},c))})},k=function(b,c){var d=a("#"+b);h(d,c),j(d,c)};return{init:k}});

1
mod/quiz/amd/build/random_question_form_preview.min.js vendored Normal file
View File

@ -0,0 +1 @@
define(["jquery","core/ajax","core/str","core/notification","core/templates","core/paged_content_factory"],function(a,b,c,d,e,f){var g=5,h="mod_quiz/random_question_form_preview_question_list",i={LOADING_ICON_CONTAINER:'[data-region="overlay-icon-container"]',QUESTION_COUNT_CONTAINER:'[data-region="question-count-container"]',QUESTION_LIST_CONTAINER:'[data-region="question-list-container"]'},j=function(a){a.find(i.LOADING_ICON_CONTAINER).removeClass("hidden")},k=function(a){a.find(i.LOADING_ICON_CONTAINER).addClass("hidden")},l=function(a,b){c.get_string("questionsmatchingfilter","mod_quiz",b).then(function(b){a.find(i.QUESTION_COUNT_CONTAINER).html(b)}).fail(d.exception)},m=function(a,c,d,e,f,g){var h={methodname:"core_question_get_random_question_summaries",args:{categoryid:a,includesubcategories:c,tagids:d,contextid:e,limit:f,offset:g}};return b.call([h])[0]},n=function(a,b,c,i,j,k){return f.createFromAjax(j,g,function(f){return f.map(function(f){var g=f.limit,j=f.offset;return 0==j?e.render(h,{questions:k}):m(a,b,c,i,g,j).then(function(a){var b=a.questions;return e.render(h,{questions:b})}).fail(d.exception)})})},o=function(b,c,f,h,o){return j(b),m(c,f,h,o,g,0).then(function(a){var c=a.totalcount;return l(b,c),a}).then(function(b){var d=b.totalcount,e=b.questions;return e.length?n(c,f,h,o,d,e):a.Deferred().resolve("","")}).then(function(a,c){var d=b.find(i.QUESTION_LIST_CONTAINER);e.replaceNodeContents(d,a,c)}).always(function(){k(b)}).fail(d.exception)};return{reload:o,showLoadingIcon:j,hideLoadingIcon:k}});

185
mod/quiz/amd/src/add_random_form.js Normal file
View File

@ -0,0 +1,185 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* JavaScript for the add_random_form class.
*
* @module mod_quiz/add_random_form
* @package mod_quiz
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(
[
'jquery',
'mod_quiz/random_question_form_preview'
],
function(
$,
RandomQuestionFormPreview
) {
// Wait 2 seconds before reloading the question set just in case
// the user is still changing the criteria.
var RELOAD_DELAY = 2000;
var SELECTORS = {
PREVIEW_CONTAINER: '[data-region="random-question-preview-container"]',
CATEGORY_FORM_ELEMENT: '[name="category"]',
SUBCATEGORY_FORM_ELEMENT: '[name="includesubcategories"]',
TAG_IDS_FORM_ELEMENT: '[name="fromtags[]"]'
};
/**
* Get the category id from the form.
*
* @param {jquery} form The form element.
* @return {string} The category id.
*/
var getCategoryId = function(form) {
// The value string is the category id and category context id joined
// by a comma.
var valueString = form.find(SELECTORS.CATEGORY_FORM_ELEMENT).val();
// Split the two ids.
var values = valueString.split(',');
// Return just the category id.
return values[0];
};
/**
* Check if the form indicates we should include include subcategories in
* the filter.
*
* @param {jquery} form The form element.
* @return {bool}
*/
var shouldIncludeSubcategories = function(form) {
return form.find(SELECTORS.SUBCATEGORY_FORM_ELEMENT).is(':checked');
};
/**
* Get the tag ids for the selected tags in the form.
*
* @param {jquery} form The form element.
* @return {string[]} The tag ids.
*/
var getTagIds = function(form) {
var values = form.find(SELECTORS.TAG_IDS_FORM_ELEMENT).val();
return values.map(function(value) {
// The tag element value is the tag id and tag name joined
// by a comma. So we need to split them to get the tag id.
var parts = value.split(',');
return parts[0];
});
};
/**
* Reload the preview section with a new set of filters.
*
* @param {jquery} form The form element.
* @param {int} contextId The current context id.
*/
var reloadQuestionPreview = function(form, contextId) {
var previewContainer = form.find(SELECTORS.PREVIEW_CONTAINER);
RandomQuestionFormPreview.reload(
previewContainer,
getCategoryId(form),
shouldIncludeSubcategories(form),
getTagIds(form),
contextId
);
};
/**
* Is this an element we're interested in listening to changes on.
*
* @param {jquery} element The element to check.
* @return {bool}
*/
var isInterestingElement = function(element) {
if (element.closest(SELECTORS.CATEGORY_FORM_ELEMENT).length > 0) {
return true;
}
if (element.closest(SELECTORS.SUBCATEGORY_FORM_ELEMENT).length > 0) {
return true;
}
if (element.closest(SELECTORS.TAG_IDS_FORM_ELEMENT).length > 0) {
return true;
}
return false;
};
/**
* Listen for changes to any of the interesting elements and reload the form
* preview with the new filter values if they are changed.
*
* The reload is delayed for a small amount of time (see RELOAD_DELAY) in case
* the user is actively editing the form. This allows us to avoid having to
* send multiple requests to the server on each change.
*
* Instead we can just send a single request when the user appears to have
* finished editing the form.
*
* @param {jquery} form The form element.
* @param {int} contextId The current context id.
*/
var addEventListeners = function(form, contextId) {
var reloadTimerId = null;
form.on('change', function(e) {
// Only reload the preview when elements that will change the result
// are modified.
if (!isInterestingElement($(e.target))) {
return;
}
// Show the loading icon to let the user know that the preview
// will be updated after their actions.
RandomQuestionFormPreview.showLoadingIcon(form);
if (reloadTimerId) {
// Reset the timer each time the form is modified.
clearTimeout(reloadTimerId);
}
// Don't immediately reload the question preview section just
// in case the user is still modifying the form. We don't want to
// spam reload requests.
reloadTimerId = setTimeout(function() {
reloadQuestionPreview(form, contextId);
}, RELOAD_DELAY);
});
};
/**
* Trigger the first load of the preview section and then listen for modifications
* to the form to reload the preview with new filter values.
*
* @param {jquery} formId The form element id.
* @param {int} contextId The current context id.
*/
var init = function(formId, contextId) {
var form = $('#' + formId);
reloadQuestionPreview(form, contextId);
addEventListeners(form, contextId);
};
return {
init: init
};
});

235
mod/quiz/amd/src/random_question_form_preview.js Normal file
View File

@ -0,0 +1,235 @@
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
/**
* JavaScript for the random_question_form_preview of the
* add_random_form class.
*
* @module mod_quiz/random_question_form_preview
* @package mod_quiz
* @copyright 2018 Ryan Wyllie <ryan@moodle.com>
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
define(
[
'jquery',
'core/ajax',
'core/str',
'core/notification',
'core/templates',
'core/paged_content_factory'
],
function(
$,
Ajax,
Str,
Notification,
Templates,
PagedContentFactory
) {
var ITEMS_PER_PAGE = 5;
var TEMPLATE_NAME = 'mod_quiz/random_question_form_preview_question_list';
var SELECTORS = {
LOADING_ICON_CONTAINER: '[data-region="overlay-icon-container"]',
QUESTION_COUNT_CONTAINER: '[data-region="question-count-container"]',
QUESTION_LIST_CONTAINER: '[data-region="question-list-container"]'
};
/**
* Show the loading spinner over the preview section.
*
* @param {jquery} root The root element.
*/
var showLoadingIcon = function(root) {
root.find(SELECTORS.LOADING_ICON_CONTAINER).removeClass('hidden');
};
/**
* Hide the loading spinner.
*
* @param {jquery} root The root element.
*/
var hideLoadingIcon = function(root) {
root.find(SELECTORS.LOADING_ICON_CONTAINER).addClass('hidden');
};
/**
* Render the section of text to show the question count.
*
* @param {jquery} root The root element.
* @param {int} questionCount The number of questions.
*/
var renderQuestionCount = function(root, questionCount) {
Str.get_string('questionsmatchingfilter', 'mod_quiz', questionCount)
.then(function(string) {
root.find(SELECTORS.QUESTION_COUNT_CONTAINER).html(string);
return;
})
.fail(Notification.exception);
};
/**
* Send a request to the server for more questions.
*
* @param {int} categoryId A question category id.
* @param {bool} includeSubcategories If the results should include subcategory questions
* @param {int[]} tagIds The list of tag ids that each question must have.
* @param {int} contextId The context where the questions will be added.
* @param {int} limit How many questions to retrieve.
* @param {int} offset How many questions to skip from the start of the result set.
* @return {promise} Resolved when the preview section has rendered.
*/
var requestQuestions = function(
categoryId,
includeSubcategories,
tagIds,
contextId,
limit,
offset
) {
var request = {
methodname: 'core_question_get_random_question_summaries',
args: {
categoryid: categoryId,
includesubcategories: includeSubcategories,
tagids: tagIds,
contextid: contextId,
limit: limit,
offset: offset
}
};
return Ajax.call([request])[0];
};
/**
* Build a paged content widget for questions with the given criteria. The
* criteria is used to fetch more questions from the server as the user
* requests new pages.
*
* @param {int} categoryId A question category id.
* @param {bool} includeSubcategories If the results should include subcategory questions
* @param {int[]} tagIds The list of tag ids that each question must have.
* @param {int} contextId The context where the questions will be added.
* @param {int} totalQuestionCount How many questions match the criteria above.
* @param {object[]} firstPageQuestions List of questions for the first page.
* @return {promise} A promise resolved with the HTML and JS for the paged content.
*/
var renderQuestionsAsPagedContent = function(
categoryId,
includeSubcategories,
tagIds,
contextId,
totalQuestionCount,
firstPageQuestions
) {
// Provide a callback, renderQuestionsPages,
// to control how the questions on each page are rendered.
return PagedContentFactory.createFromAjax(
totalQuestionCount,
ITEMS_PER_PAGE,
// Callback function to render the requested pages.
function(pagesData) {
return pagesData.map(function(pageData) {
var limit = pageData.limit;
var offset = pageData.offset;
if (offset == 0) {
// The first page is being requested and we've already got
// that data so we can just render it immediately.
return Templates.render(TEMPLATE_NAME, {questions: firstPageQuestions});
} else {
// Otherwise we need to ask the server for the data.
return requestQuestions(
categoryId,
includeSubcategories,
tagIds,
contextId,
limit,
offset
)
.then(function(response) {
var questions = response.questions;
return Templates.render(TEMPLATE_NAME, {questions: questions});
})
.fail(Notification.exception);
}
});
}
);
};
/**
* Re-render the preview section based on the provided filter criteria.
*
* @param {jquery} root The root element.
* @param {int} categoryId A question category id.
* @param {bool} includeSubcategories If the results should include subcategory questions
* @param {int[]} tagIds The list of tag ids that each question must have.
* @param {int} contextId The context where the questions will be added.
* @return {promise} Resolved when the preview section has rendered.
*/
var reload = function(root, categoryId, includeSubcategories, tagIds, contextId) {
// Show the loading spinner to tell the user that something is happening.
showLoadingIcon(root);
// Load the first set of questions.
return requestQuestions(categoryId, includeSubcategories, tagIds, contextId, ITEMS_PER_PAGE, 0)
.then(function(response) {
var totalCount = response.totalcount;
// Show the help message for the user to indicate how many questions
// match their filter criteria.
renderQuestionCount(root, totalCount);
return response;
})
.then(function(response) {
var totalQuestionCount = response.totalcount;
var questions = response.questions;
if (questions.length) {
// We received some questions so render them as paged content
// with a paging bar.
return renderQuestionsAsPagedContent(
categoryId,
includeSubcategories,
tagIds,
contextId,
totalQuestionCount,
questions
);
} else {
// If we didn't receive any questions then we can return empty
// HTML and JS to clear the preview section.
return $.Deferred().resolve('', '');
}
})
.then(function(html, js) {
// Show the user the question set.
var container = root.find(SELECTORS.QUESTION_LIST_CONTAINER);
Templates.replaceNodeContents(container, html, js);
return;
})
.always(function() {
hideLoadingIcon(root);
})
.fail(Notification.exception);
};
return {
reload: reload,
showLoadingIcon: showLoadingIcon,
hideLoadingIcon: hideLoadingIcon
};
});

2
mod/quiz/lang/en/quiz.php
View File

@ -651,8 +651,10 @@ $string['questionnotloaded'] = 'Question {$a} has not been loaded from the datab
$string['questionorder'] = 'Question order';
$string['questionposition'] = 'New position in order for question {$a}';
$string['questions'] = 'Questions';
$string['questionsetpreview'] = 'Question set preview';
$string['questionsinclhidden'] = 'Questions (including hidden)';
$string['questionsinthisquiz'] = 'Questions in this quiz';
$string['questionsmatchingfilter'] = 'Questions matching this filter: {$a}';
$string['questionsperpage'] = 'Questions per page';
$string['questionsperpageselected'] = 'Questions per page has been set so the paging is currently fixed. As a result, the paging controls have been disabled. You can change this in {$a}.';
$string['questionsperpagex'] = 'Questions per page: {$a}';

40
mod/quiz/templates/random_question_form_preview.mustache Normal file
View File

@ -0,0 +1,40 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template mod_quiz/random_question_form_preview
A preview section for the list of questions that match the random
question criteria in the random question form.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* title A cleaned string (use clean_text()) to display.
* body HTML content for the boday
Example context (json):
{}
}}
<div class="m-t-2 position-relative" data-region="random-question-preview-container">
<div data-region="question-count-container"></div>
<div data-region="question-list-container"></div>
{{< core/overlay_loading }}{{$hiddenclass}}{{/hiddenclass}}{{/ core/overlay_loading }}
</div>

58
mod/quiz/templates/random_question_form_preview_question_list.mustache Normal file
View File

@ -0,0 +1,58 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template mod_quiz/random_question_form_preview_question_list
A preview section for the list of questions that match the random
question criteria in the random question form.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* title A cleaned string (use clean_text()) to display.
* body HTML content for the boday
Example context (json):
{
"questions": [
{
"name":"Example question 1"
},
{
"name":"Example question 2"
},
{
"name":"Example question 3"
},
{
"name":"Example question 4"
}
]
}
}}
<ul class="list-group" data-region="question-list">
{{#questions}}
<li class="list-group-item text-truncate">
{{#icon}}{{#pix}} {{key}}, {{component}}, {{{alttext}}} {{/pix}}{{/icon}}
{{name}}
</li>
{{/questions}}
</ul>

40
theme/bootstrapbase/templates/mod_quiz/random_question_form_preview.mustache Normal file
View File

@ -0,0 +1,40 @@
{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template mod_quiz/random_question_form_preview
A preview section for the list of questions that match the random
question criteria in the random question form.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* title A cleaned string (use clean_text()) to display.
* body HTML content for the boday
Example context (json):
{}
}}
<div class="m-t-2" data-region="random-question-preview-container" style="position:relative">
<div data-region="question-count-container"></div>
<div data-region="question-list-container"></div>
{{< core/overlay_loading }}{{$hiddenclass}}{{/hiddenclass}}{{/ core/overlay_loading }}
</div>