Quiz UI redesign - development

Back to Quiz_UI_redesign

Migration

After finishing

• most critical issues here
• cleanup
• //TODO points in code have been checked

start migration from Moodle 1.9 to HEAD Moodle 2.0. After this, will all changes need to be related to individual bug reports in the tracker?

Changes based on usability testing

Critical

• (1d) No. 27
  • Issue: The user was unsure of whether the random question actually randomizes between the questions, since single question preview for random questions was broken
  • Even if the random question has only two multiple choice questions, it still is broken, so the but is not about essay questions. the preview window displays an sql error.
  • Solution: fix preview for random questions; this may be related to the quiz having empty questions

---

• DONE No. 16
  • Issue: While trying to add questions to random question, the user made a new random question with a parent category of the previous random question
  • Solution: Make the random question dialog select the top-level category by default, not the currently selected category of the question bank window.

Others

• (1h) Enlarge the basic ideas of quiz -help text link

---

• Issue: The user seemed to assume that the different controls for adding different types of questions are related to the same operation.
  • Solution: clearly separate from the two other buttons the title, dropdown and possible button of creating single questions by grouping them together?

---

• (1d) No. 21
  • Issue: The user tried to move the YUI dialog window in order to make sure what the category was s/he was trying to add a random question into (that is, the user thought s/he needs to add a random question in the existing random question category in order to get questions in there.)
  • Solution: Make the YUI dialogs movable.
    • BUG: the option for making movable has been enabled and drag and drop module works by itself on the page, but the dialog still is not movable

---

• (1h) No. 35
  • Issue: The user did not understand the concept of quiz pages, but wondered if the paging was for making the quiz printable
  • Note: The user also commented that s/he was searching for a general help where s/he could look up such a concept of a page
  • Solution: Document the paging in “Basic ideas” help dialog

---

• No. 36
  • Issue: The color of the reorder text box was misleading, the user did not identify as text box.
  • Solution: change colouring, make a select dropdown?
  • Related: 42

---

• No. 47
  • Issue: After the user saw the "add new pages after selected questions" button s/he selected all the questions, thinking that a page will be added only after the last of them.
  • Solution: change the wording. this issue may only be there in finnish.

---

• No. 51
  • The user clicked the "Lisää uusi sivu valittujen kysymysten jälkeen" button without selecting any questions
  • Solution: Either add a notification that you have to select some questions, or add a new page anyway at the end?
  • Or, could you just use JavaScript to disable the button until something is selected?--Tim Hunt 21:46, 23 September 2008 (CDT)
    • You could, though there is a risk that the user does not understand what is the state of the application that causes the button to be disabled.--Olli Savolainen 05:24, 26 September 2008 (CDT)

---

• No. 52
  • Issue: The user selected all questions except the first one and clicked "järjestä kysymykset", causing no reaction by the application (except reordering questions. s/he said s/he expects the, to be moved to the page 2.
  • Solution: If user tries to move questions from a page to the same page, do not alter the order. Separate the functionalities of reordering and moving on different pages.

See also: Quiz_UI_redesign/usability_testing_of_August_2008/Summary_of_solutions

Features

Critical

• DONE complete the status bar to have what's relevant from quiz settings (it is full but more could be needed)
  • DONE exam total points
• DONE quiz grade display and changing
• repaginate
  • hide the repaginate dialog button for non-js users
  • DONE (2d) Tim> By the way, the new interface for adding a random question to the quiz does not work for me. The form appears, but I get an error when I click submit.
    • I can reproduce this now. the submit button does not work, it gives a strange "H is undefined" error, both in add random question and the new repaginating dialog --Olli Savolainen 09:08, 26 September 2008 (CDT)
    • FIXED: it seems the default way of submitting forms for the YUI dialog is an asynchronous ajax call, and that is what is was trying. Added 'postmethod: "form",' to the form attributes and now it seems to work, though on IE/Opera the dialogs are still broken.
• add to appropriate places checks if a quiz has consecutive page breaks (attempt.php etc.) or page breaks at the beginning of quiz!

http://moodle.org/mod/forum/discuss.php?d=100367

• (4h) keyboard usage
  • make sure tabindexes work
  • anything else?
• (2h) quiz edit view in case of attempted exam

Others

• DELEGATE/report a bug (ask Tim): if quiz has been attempted, make the choices available automated as possible for the user, as follows. I think this would be of tremendous benefit, as also various messages in the quiz forum show this is a real issue:
  • 1. Always warn the user if the are about to do something that affects the set of choices they can make later (User control and freedom), and as the undo here is not obvious, tell the user about it
  • 2. Make the user aware of the choices they have in the quiz edit screens, where their actions' consequences are the most obvious: "The quiz has been <a href="attempts listing">attempted</a>, so you cannot edit it. You can still edit the questions in categories, so if you have random questions you can change the contents of those. If you need to modify the quiz, you can: delete the attempts from this quiz, or keep the attempts in this quiz but make a copy of it without the attempts
• communicate all error states to user
  • "the question you tried to add is already in the quiz"
  • repaginating tool: as the questions have been reordered in the settings, this tool has no effect
  • warnings for 0,1,2 questions in random question's category
  • Making sure that "unfinished states" of quiz are handled correctly: an empty page in the middle of the page, and empty random question, questions with dysfunctional states (multiple choices with no choices etc.)
• tooltips
  • add tooltip: the category of a single question in quiz
• if there are different question types in a random question category, report this
• add a save all grades -button in edit tab
• DONE empty random questions: add link to open question bank if question bank is not open: "you can add questions to the category in the question bank >>"
• (4h) //TODO: add javascript quick hiding/showing question bank menu by adding the now-html-commented id's to the elements - requires submitting the GET parameter accordingly in the background and returning false for the link so the browser does not actually GET it
  • http://developer.yahoo.com/yui/connection/

Missing other changes

Critical

• help-icons: Add help icons in appropriate places; add labels to icons where testing shows it is required; write further relevant documentation to Docs
  • bring back contextual help icons where appropriate
• There should be a link back to the current quiz from question bank (and a corresponding link to question bank on quiz in the same position on the screen, easily enough found). See also: Quick switch proposition
• Rights management
• Unless the bug that makes random essay questions not work is fixed for Moodle 2.0, add a warning about it: MDL-8648

Others

• (1d) separate the buttons for reordering questions and moving to other pages
• (4h) Logging of every page view, operations, verify what else?
• DELEGATE/report bug (Tim?): There should be at least some level of consistency with the actual question bank and quiz edit tab/question bank window.
• 8. You probably need to change your print_box_start(); call around line 570 of edit.php to print_box_start('generalbox clearfix');
• Empty random questions: it should be an error in the editing interface, and invisible in the actual quiz when it is being taken/attempted: that is, as you can create a random question right into the new category, as long as there would be such empty random questions, there would be visible warnings that the quiz is in an unfinished state in the editing UI - but this should not have any negative effect in quiz taking, the question should just be absent (except perhaps in teacher preview, where the difference with the teacher preview and the actual quiz should then be made extremely obvious)
• Default submit button of the reordering/paging tab, http://blog.aujava.com/?p=28 <- convert this to YUI, please, OR http://p2p.wrox.com/topic.asp?TOPIC_ID=27961 http://www.devx.com/vb2themax/Tip/18846
• reordering/paging tab: color selected questions with javascript
• confirm that with right-to-left languages the layout is OK
• ad a semantic CSS class to the edit icons in reorder tab (or remove the preview css class and change it to something more general like "questioncontrols")
• question bank: if the question name is long, the question text is not visible
• increase default width for page numbers so it is same for all pages

Bugs

Critical

• 9. It still lets me add questions even though the "You cannot add or remove questions because there are attempts." message is displayed. Also, when that message is displayed, the stylesheet is not used so the layout is messed up.

• DONE Adding a page on edit tab can add two pages at once
  • This seems to have been caused somehow by the error reporting in debug mode. Once the database errors at the beginning of the page were fixed, this got fixed too. I do not know why the error reporting produced this bug, possibly because the page reloading/redirecting worked differently?
• storing operational parameters in url is a fatal usability error: a user may reload a page after deleting a question and, without realizing it, delete another question from the quiz. - partially fixed, by forwarding if $significantchangesmade
• DONE Opera9.27 YUI order&paging dialog broken, fallback disabled
• add random question fallback has PHP errors
• remove the hack to load css via javascript to hide the repaginating form
  • need a way to add a css class to an element in the HEAD so that the form will not flicker
• the question bank window does not preserve category when switching from edit view to reorder view

Others

• IE6 YUI dialog broken: fallback works
• Opera9.27 YUI add random question dialog broken: fallback works
• 80 characters/row, 8 spaces if line is broken in many due to length
• SQL error new question_category_object()
• IE css for tab icons
• 3. Line 249 of mod/quiz/edit.php (an example of a line that is too long!) refers to $param->..., but I can't see where this is defined. Looking at the code being called, these parameters don't seem to be used. Oh ... 4. I did not know about the PHP compact function. It looks dangerous to me, because it makes it hard to see where a variable like $currentcat is used. I would stick to the more verbose array('currentcat' => $currentcat, 'contexts' => $contexts); 5. And it is this undefined variable that is giving me SQL errors like
• In random question adding dialog: "Create a category for a new random question" -> "Create a category for the new random question"

Cleanup

• Clean up any inline javascript, CSS & HTML; move to appropriate libraries and themes; research what is the optimal approach with these
  • As soon as there is agreement about how JS should be included in Moodle 2.0
• mod/quiz/addrandom.php - You have an unnecessary ?><?php near the end. DONE
• mod/quiz/edit_redesign.css I note that you have comments in here for things that need to be tested. That would need to be done before 2.0
• mod/quiz/edit_redesign.css You should normally be able to avoid using !important by using appropriate selectors.
• mod/quiz/edit_redesign.css You have some empty rules, which should be cleaned up.
• tabs -> spaces
• 7. The way to get extra stuff, like links to stylesheets, included in <head>, is to pass extra HTML as the 5th ($meta) parameter to print_header_simple.
• The hack in print_header needs to go. Acutally see (and vote for!) MDL-16151, which is something that has been needed for ages. weblib.php:2473
• new essay icon in project directory
• the strings in lang files should be sorted alphabetically, although I understand why you wanted to keep all the new strings separate while this was a patch.
• In popup_form, the line "$submitvalue=$go;" should be outside the inner if statement.
• print_paging_bar - are these changes really relevant to the current project? If they are a separate thing, probably better to file a separate tracker bug and patch for these.
• question/category_class.php question/category_form_randomquestion.php A lot of these changes are related to the quiz UI, although they are also related to random questions. Do they really belong here, or would they be better somewhere in the quiz?
• mod/quiz/addrandom.php Innapropriate copy-and-pasted comment at the top of this file.
• make sure the labels on the add random question fallback page are identical with the actual dialog
• make CSS comply with moodle themes and UI guidelines; HTML/CSS design; work to get UI elements into the Moodle theming system or, when feasible, use what is already there. See also: [https://tracker.moodle.org/browse/CONTRIB-534 CONTRIB-534]
  • Tim> mod/quiz/edit_redesign.css If this code gets released as part of Moodle 2.0, these styles need to be put into theme/standard, with its annoying division of CSS into different files for layout, colours and fonts, and separate files for browser-specific hacks.
    • Clean out old quiz CSS if it is in conflict?
• go through the logic in the discarded code of quiz_print_question_list

Under consideration

• Create new category in quiz edit screen's question bank window
• Possibly, moving questions between categories (not sure yet if this needs to be supported in the Quiz editing screen)
• Tim> Is drag-and-drop reordering on the todo list? and have you looked at how re-ording activities on the course front page works? Again, changing that may be something for the future.
  • http://www.gregphoto.net/sortable/index.php
  • Issue No. 40 Quiz_UI_redesign/usability_testing_of_August_2008/Issues
• Tim> I am not convinced by the repeated IU elements at the top and bottom of the reordering page. They look silly on very short quizzes, and are not really enough on very long quizzes.
• Tim> On the quiz settings form, we should change the "Questions per page" caption to "Automatic page breaks" with options "Never", "After every question", "Every 2 questions", ... I don't think we need to give every single option up to 50, either! -> OK, so "Automatically start a new page"
  • Why would you prefer that? It seems backwards to me. The logic is pages that contain questions. "Starting pages after questions" tries to stick with the old logic of page breaks, which is misleading since the functionality is about pages and not something that happens between or after pages. And I can well see the use case of a teacher wanting an exact number of questions per page - 50 may be too much, but then, the dropdown is probably not too long for anyone yet. Users often prefer to have a text box to type the value in, though, but I do not see this as a high-priority change. --Olli Savolainen 07:04, 30 September 2008 (CDT)
• "The current 1.9.2 version and earlier ones had a nasty habit of making quiz items inaccessible to other quizzes if they were created within a quiz, rather than using the Question link in the admin panel. That seems to have been cleared up with this revision. Wonderful!"This may be a bug covering another bug? Does someone know something about the reasons behind this kind of behaviour in 1.9.2?
• ask Tim: 'If we are talking redesign, I would really like to see the "Description" question type renamed to "Label" as this is the standard Moodle term in courses for this functionality. It is one less thing teachers would need to learn as they know what Labels do already.'
• ask Tim: the question deleting md5 check still unclear http://moodle.org/mod/forum/discuss.php?d=102062
• in random questions added directly to quiz, what should we choose as a value for recurse?
  • should this be an option in the random question dialog?
  • paging of items if there are >30 (Fluid allows to "Allow users to break up long lists of items into separate pages" - try this out?)
  • how to make string changes go upstream?
    • (As it says in the Moodle coding guidelines) you should never change langauge strings. This is because the same language packs are used for all versions of Moodle. If you need a different string, create a new one.--Tim Hunt 08:41, 2 July 2008 (CDT)
      • Hm the thing is, if a translation does not make sense in a specific language, or if I know that a string is indeed intended for this specific button, but usability-wise/grammatically it is not the best choice? Still just create new ones?--Olli Savolainen 12:31, 2 July 2008 (CDT)
• No. 40 Quiz_UI_redesign/usability_testing_of_August_2008/Issues
  • Issue: The user commented that it would be easier if s/he could move the questions like other elements are moved in moodle course front page
  • Solution: Do it, this is important for Moodle's internal consistency
• (2d) Issue: The user did not notice that the question bank category changed when s/he selected the random question
  • Solution: Make the toolbox react to changes more noticeably. Show a "loading" animation in the question bank window if it changes. This might be done perhaps even with an absolutely positioned div with a partially transparent animated GIF. The problem is to only show the loading animation when the category is changed, not on every page load. Events to react to: changing category from the bank window or by selecting random question from quiz, adding a question to a category...
• If the user clicks add a random question before the page has finished loading, the javascript may not have been activated yet and thus the fallback of going to the separate page is activated. This brings inconsistency to the user experience.
• when adding a question from a quiz directly a category is not and should not be specified by default, but the user should be made to select a category in the question edit screen. they may select default for everything and it is not much of a hassle, but they will be at least faintly aware of the existence of categories. (for now the default category is selected by default)

Obsolete

• Add "virtual tabs" to fluently switch between qbank and quiz
• Question bank
• New Quiz edit tab http://tracker.moodle.org/browse/CONTRIB-530

• Random questions
  • is it possible to have an empty random question in quiz?
    • Basically no, or at least it is possible, but it leads to an error. This situation can be represented in the database, and you can even create it through the current UI (add a random question from a category, then delete all the questions in that category). However, this will lead to an error when you run the quiz.--Tim Hunt 08:41, 2 July 2008 (CDT)
      • Thanks Tim. What I am thinking is it should be an error in the editing interface, and invisible in the quiz: that is, as you can create a random question right into the new category, as long as there would be such empty random questions, there would be visible warnings that the quiz is in an unfinished state in the editing UI - but this should not have any negative effect in quiz taking, the question should just be absent (except perhaps in teacher preview, where the difference with the teacher preview and the actual quiz should then be made extremely obvious)?--Olli Savolainen 09:41, 2 July 2008 (CDT)
      • That is: do you think we (I) should a) Modify the current empty randomquestions to notify of their state appropriately or b) create a new structure that stores the states of empty random questions in the new editing UI and then only create actual random questions when the user adds questions to them. This brings us to the question: what would then happen if the user again removes all the question from a random question category?--Olli Savolainen 04:35, 3 July 2008 (CDT)
  • replace tabs with 4 spaces, eclipse PDE seems to not obey this very well
• More: project tracker: http://tracker.moodle.org/browse/CONTRIB-528

Completed:

• New question bank window
• keep cmid ALWAYS along in the urls (?)? -done
• add page count -done
• Storing the question bank window - completed, using set_user_preference()
• //TODO: make the actual question bank hiding possible without javascript - done, currently only without javascript
• question box layout: ensure line breaks don't break the layout unusable -- done, css overflow:hidden;white-space:nowrap;
• add correct parameters (no id) to add question form from quiz -was bug, fixed

• Find out about $pagevars, do I need to extend them, where's the documentation?
• abstract random question category creating into a function which both the AJAX-style and the traditional version can use
• even if there are no questions, show an empty page to which add questions
• different presentations for random questions and other questions
• Paging and reordering tab
  • Add: Repaginate with N questions per page
  • clean up the old tabs
  • add delete page 'X' -> "Are you sure? There is no undo for this." DONE (added deleting pages only for empty pages, no confirmation)
  • make forms functional: question scoring, new question/randomq/description formslib
  • add help dialog: basic concepts of quiz
    • //TODO: something in the javascript broke and questions are being added not on the right page, but to the end

Relevant development links in docs

• Developer_documentation#Resources_and_tools
• Developer_meetings
• Unit_tests
• Tracker:Quiz issues