Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Javascript-interface for repeat elements function: Difference between revisions

From MoodleDocs
No edit summary
(Note about plan not to migrate this page to the new developer resources. See template for more info.)
 
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Template:WillNotMigrate}}
'''GOAL''': improve usability by using dynamic form editing.
'''GOAL''': improve usability by using dynamic form editing.


At this moment form editing, especially adding new blank answers, units, choices and fields requires page reloading.  
'''PROBLEM''':
Editing blanks order or blank removing is not possible without page reloading.  
* Adding blanks requires page reloading, if there are a lot of blanks with WYSIWYG it takes a lot of time to initialize them.
* Changing blanks order is tedious.
 
'''EXAMPLE''': let's imagine you have a multichoice question with 8 or more choices and the order of choices matters. Imagine you found you want add new choice at the start or delete first choice. With current interface you are in a BIG trouble.


'''TASK''': The main task is development of JavaScript-interface for repeat_elemens function. Other task is make ADD, REMOVE and MOVE actions without page reloading. If JavaScript is not available in user's browser this actions must work with page reloading, like it works now.
'''TASK''': The main task is development of JavaScript-interface for repeat_elemens function. Other task is make ADD, REMOVE and MOVE actions without page reloading. If JavaScript is not available in user's browser this actions must work with page reloading, like it works now.


# ''Where it will be.''
 
This core patch will work on this pages(default configuration and modules list):
== Where it will be. ==
Here, there are some pages, where this function uses, in the list below :
* Course editing -> Adding a new Choice - Adding fields to form;
* Course editing -> Adding a new Choice - Adding fields to form;
* Course editing -> Adding a new Quiz -  Adding new feedback fields;
* Course editing -> Adding a new Quiz -  Adding new feedback fields;
Line 20: Line 25:
* Course editing -> Editing Quiz-> Editing a Numerical question - Adding Blanks for choices;
* Course editing -> Editing Quiz-> Editing a Numerical question - Adding Blanks for choices;
* Course editing -> Editing Quiz-> Adding a short answer question - Adding Blanks for choices;
* Course editing -> Editing Quiz-> Adding a short answer question - Adding Blanks for choices;
etc.
As repeat_elements is core function, it should work anywhere.
This core patch will add new buttons to the form interface.
This core patch will add new buttons to the form interface.
http://imglink.ru/pictures/21-09-10/f85258328f02d65164e6a15644e5d8a9.jpg
http://imglink.ru/pictures/21-09-10/f85258328f02d65164e6a15644e5d8a9.jpg
[[Image:7.jpg]]
[[Image:7.jpg]]
# ''Adding new blanks''
 
== Adding new blanks ==
 
Adding new blanks realize by pushing "Add blanks for SMTH" button.  
Adding new blanks realize by pushing "Add blanks for SMTH" button.  
It will initiate AJAX request to the server, and will call repeat_elements function and it's result will be displayed on users screen.
There will be a hidden empty blank. When user will push the button, it's duplicate will be added in the end of blank's list.
 
# ''Removing blanks''.
== Removing blanks. ==
 
It's possible to remove only 'Empty' blanks. Empty blank is that blank, where all key-fields are empty or have default values.
It's possible to remove only 'Empty' blanks. Empty blank is that blank, where all key-fields are empty or have default values.
List of elements, which will be check:
List of elements, which will be check:
Line 38: Line 49:
*PASSWORD and PASSWORDUNMASK
*PASSWORD and PASSWORDUNMASK
A password element. Empty, when it doesn't contains any text.
A password element. Empty, when it doesn't contains any text.
*TEXT
TEXT
Simple text input element. Empty, when it doesn't contains any text.
Simple text input element. Empty, when it doesn't contains any text.
*TEXTAREA
*TEXTAREA
Line 47: Line 58:
Blank's removing realize by pushind remove button(see screenshot) and confirming your choise.
Blank's removing realize by pushind remove button(see screenshot) and confirming your choise.
If blank's removing isn't possible user will get allert with reason.
If blank's removing isn't possible user will get allert with reason.
[screenshot remove button]
 
# Moving blanks
== Moving blanks ==
Blanks moving is available by dragging them with move button
 
[screenshot move button]
Blanks moving is available by dragging them with move button.
At any moment you can set all your blanks in default positions, using button "Restore order"
Blank's original order will be reported on saving , by using hidden elements, named "ord", which will save order number of each blank. You could use it to determine where each element is go (even if edited). This is useful, for example, when editing question with existing attempts: saving procedure would know new indexes of all previous answers even if they are moved AND their content edited, so it could ajust student's responses accordingly.




For example:
Creation:
  We've got 3 empty blanks. Values of their "ords" are -1,-1,-1.
Editing:
  We edit all blanks. We've got 3 blanks with ords -1,-1,-1.
Saving:
  We save question(or smth else), Ords: -1,-1,-1
Loading:
  Ords: 0,1,2
Removing:
  We remove blank, from the middle of blank-list. We've got 2 blanks with ords 0,2.
Adding:
  We add two blanks. We've got ords: 0,2,-1,-1
Moving:
  We move last blank to be first. Ords: -1,0,2,-1


Adding new '''blank answer''' requires page-reloading. It's not comfortable. Using advanced opportunities of YUI library we can realize adding blank choices without it. Button "Blanks for 3 more Choices" will be changed to "Add blank choise".
So, the saving procedure would know that answer number 1 is deleted and answers number 0 and 2 changed their places.


Pushing button '''Add blank choise''' will add one empty answer to the page without reloading.
Besides, when user change blanks order, script changes names of fields of every blank. So in every moment names of blanks will be in order, that's why server-side will save them in the same order.


Another addition is removing answers from page withou reloading. Removing answer will be able, if all text fields(input text or textarea) are empty. Pushing button http://imglink.ru/pictures/21-09-10/36894a2cd789d3916c86f12105b96d42.jpg while all text fields are empty will ask confirmation using confirm dialog.
== Function Interface ==
http://imglink.ru/pictures/21-09-10/68342df9db64b00f69b4dcd15edba37f.jpg
If text fields are not empty, like here http://imglink.ru/pictures/21-09-10/797d7f513ce2c3588e4be3e216f4b767.jpg
you will see alert dialog http://imglink.ru/pictures/21-09-10/166ccbfe86c3f9d14d7c8b2aef88bbdb.jpg


Another addition is moving answers up and down in answer list, using this button:http://imglink.ru/pictures/21-09-10/caa63175d62020a04104cb2fdf1f789a.jpg
Interface of repeat_elements function will receive 7 params instead of 8 in original version.
New param $prefix gets prefix for additional form elements, added by the repeat_elements function.
In original vewrsion this names were separated and saved in two params: $repeathiddenname and $addfieldsname.
This preliminary change, simplifying the interface and helps to solve the basic problem without changing it.
--[[User:Сергей Горелов|Сергей Горелов]] 18:15, 14 October 2010 (UTC)

Latest revision as of 13:51, 24 June 2022


Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.


GOAL: improve usability by using dynamic form editing.

PROBLEM:

  • Adding blanks requires page reloading, if there are a lot of blanks with WYSIWYG it takes a lot of time to initialize them.
  • Changing blanks order is tedious.

EXAMPLE: let's imagine you have a multichoice question with 8 or more choices and the order of choices matters. Imagine you found you want add new choice at the start or delete first choice. With current interface you are in a BIG trouble.

TASK: The main task is development of JavaScript-interface for repeat_elemens function. Other task is make ADD, REMOVE and MOVE actions without page reloading. If JavaScript is not available in user's browser this actions must work with page reloading, like it works now.


Where it will be.

Here, there are some pages, where this function uses, in the list below :

  • Course editing -> Adding a new Choice - Adding fields to form;
  • Course editing -> Adding a new Quiz - Adding new feedback fields;
  • Course editing -> Editing Quiz-> Editing a calculated question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a calculated question - Adding Blanks for Units;
  • Course editing -> Editing Quiz-> Editing a Calculated Multichoice question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a Simple Calculated question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a Simple Calculated question Adding Blanks for Units;
  • Course editing -> Editing Quiz-> Editing a Matching question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a Multiple choice question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a Numerical question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Editing a Numerical question - Adding Blanks for choices;
  • Course editing -> Editing Quiz-> Adding a short answer question - Adding Blanks for choices;

etc. As repeat_elements is core function, it should work anywhere.

This core patch will add new buttons to the form interface. http://imglink.ru/pictures/21-09-10/f85258328f02d65164e6a15644e5d8a9.jpg 7.jpg

Adding new blanks

Adding new blanks realize by pushing "Add blanks for SMTH" button. There will be a hidden empty blank. When user will push the button, it's duplicate will be added in the end of blank's list.

Removing blanks.

It's possible to remove only 'Empty' blanks. Empty blank is that blank, where all key-fields are empty or have default values. List of elements, which will be check:

  • FILE.

File upload input box with browse button. Empty, when filepath is empty.

  • FILEPICKER

General replacement of file element in Moodle 2.0 . Empty, when filepath is empty.

  • HTMLEDITOR

Empty when it doesn't contains eny content.

  • PASSWORD and PASSWORDUNMASK

A password element. Empty, when it doesn't contains any text. TEXT Simple text input element. Empty, when it doesn't contains any text.

  • TEXTAREA

A textarea element. Empty, when it doesn't contains any text.

Other form elements like DATEPICKER, RECAPTCHA, SELECT, HIDDEN and others can contain's any values, becuse they won't be check.

Blank's removing realize by pushind remove button(see screenshot) and confirming your choise. If blank's removing isn't possible user will get allert with reason.

Moving blanks

Blanks moving is available by dragging them with move button. Blank's original order will be reported on saving , by using hidden elements, named "ord", which will save order number of each blank. You could use it to determine where each element is go (even if edited). This is useful, for example, when editing question with existing attempts: saving procedure would know new indexes of all previous answers even if they are moved AND their content edited, so it could ajust student's responses accordingly.


For example: Creation:

 We've got 3 empty blanks. Values of their "ords" are -1,-1,-1.

Editing:

 We edit all blanks. We've got 3 blanks with ords -1,-1,-1.

Saving:

 We save question(or smth else), Ords: -1,-1,-1

Loading:

 Ords: 0,1,2

Removing:

 We remove blank, from the middle of blank-list. We've got 2 blanks with ords 0,2.

Adding:

 We add two blanks. We've got ords: 0,2,-1,-1

Moving:

 We move last blank to be first. Ords: -1,0,2,-1

So, the saving procedure would know that answer number 1 is deleted and answers number 0 and 2 changed their places.

Besides, when user change blanks order, script changes names of fields of every blank. So in every moment names of blanks will be in order, that's why server-side will save them in the same order.

Function Interface

Interface of repeat_elements function will receive 7 params instead of 8 in original version. New param $prefix gets prefix for additional form elements, added by the repeat_elements function. In original vewrsion this names were separated and saved in two params: $repeathiddenname and $addfieldsname. This preliminary change, simplifying the interface and helps to solve the basic problem without changing it. --Сергей Горелов 18:15, 14 October 2010 (UTC)