{"id":1051,"date":"2017-03-09T15:17:58","date_gmt":"2017-03-09T15:17:58","guid":{"rendered":"http:\/\/www.numbas.org.uk\/?p=1051"},"modified":"2017-03-09T15:17:58","modified_gmt":"2017-03-09T15:17:58","slug":"development-log-march-2017-usability-improvements","status":"publish","type":"post","link":"https:\/\/www.numbas.org.uk\/theme-testing\/blog\/2017\/03\/development-log-march-2017-usability-improvements\/","title":{"rendered":"Development log: March 2017 &#8211; Usability improvements"},"content":{"rendered":"<p>We&#8217;ve made a few changes to Numbas and the editor\u00a0recently,\u00a0with the aim of improving usability. It involved moving some parts of the editor around, so I thought I&#8217;d better show what we&#8217;ve done.<\/p>\n<p>First of all, when\u00a0you submit an answer to a part of a Numbas question, the input changes colour depending on the score you were awarded. (If you&#8217;ve got score feedback turned off, it turns the same colour no matter how you did)<\/p>\n<p>Here&#8217;s an example:<\/p>\n<div style=\"width: 364px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-1051-1\" width=\"364\" height=\"152\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/input-answer-state.mp4?_=1\" \/><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/input-answer-state.mp4\">http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/input-answer-state.mp4<\/a><\/video><\/div>\n<p><!--more-->Now, on to the editor!<\/p>\n<p>We\u00a0wanted to make it more obvious, for a novice question author, how to proceed through the editor to write a question.<\/p>\n<p><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout.png\"><img loading=\"lazy\" class=\"aligncenter size-main-image wp-image-1057\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout-600x273.png\" alt=\"\" width=\"600\" height=\"273\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout-600x273.png 600w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout-300x137.png 300w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout-768x350.png 768w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout-1024x466.png 1024w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/numbas-rejigged-layout.png 1880w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>The main tabs have been re-ordered\u00a0to match the order you&#8217;d expect to write things &#8211; first you write a question statement; then set up parts where the student can enter their answer;\u00a0define variables used to randomise the question; and finally write a worked solution.<\/p>\n<p>The &#8220;settings&#8221; tab is now further down; the intention is that you&#8217;ll deal with it once you&#8217;ve actually written your question!<\/p>\n<p>To really guide authors through the question-writing flow, the little pager at the bottom of each tab now give you some hints about what you should be doing, and then lights up the button to move to the next tab once you&#8217;ve done it.<\/p>\n<div style=\"width: 570px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1051-2\" width=\"570\" height=\"418\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/pager-hint-1.mp4?_=2\" \/><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/pager-hint-1.mp4\">http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/pager-hint-1.mp4<\/a><\/video><\/div>\n<p>The other aspect of the editor we&#8217;ve\u00a0rearranged is the part editors.<\/p>\n<p>When you first visit the &#8220;Parts&#8221; tab, you&#8217;re presented with a big button to add a part. This button is now a dropdown, so you select the part type first, before the editor appears.<\/p>\n<div style=\"width: 580px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1051-3\" width=\"580\" height=\"470\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/add-part.mp4?_=3\" \/><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/add-part.mp4\">http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/add-part.mp4<\/a><\/video><\/div>\n<p>We wanted to make it obvious which fields you\u00a0<em>need<\/em> to fill in to get a workable question, and which are extra settings you can use to refine the behaviour of the part. Now the tabs you need to look at are separated visually from the\u00a0less-important tabs, and the most important fields within each tab are also separated from the rest. In the &#8216;Marking&#8217; tab, the fields you don&#8217;t have to change immediately are grouped under an &#8220;Advanced settings&#8221; header.<\/p>\n<p><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor.png\"><img loading=\"lazy\" class=\"aligncenter size-main-image wp-image-1065\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor-600x436.png\" alt=\"\" width=\"600\" height=\"436\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor-600x436.png 600w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor-300x218.png 300w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor-768x559.png 768w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor-1024x745.png 1024w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/part-editor.png 1100w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>We&#8217;ve moved the &#8220;delete this question\/exam&#8221; and &#8220;make a copy&#8221; buttons over to the left toolbar, so they&#8217;re not buried in the &#8220;Settings&#8221; tab. We&#8217;ve also moved the feedback dropdown to the header, combining it with the existing &#8216;stamp&#8217; which\u00a0shows the current feedback status. Now, all questions and exams begin in the &#8220;draft&#8221; state, and clicking on the stamp lets you choose a feedback stamp to apply. There&#8217;s also a line showing the publication status of the question\/exam, as a little reminder to publish items when they&#8217;re ready.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-1068\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/feedback-dropdown.png\" alt=\"\" width=\"231\" height=\"327\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/feedback-dropdown.png 231w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/feedback-dropdown-212x300.png 212w\" sizes=\"(max-width: 231px) 100vw, 231px\" \/><\/p>\n<p>I hope that these changes increase your enjoyment of Numbas; if you have any comments or suggestions, we&#8217;d love to hear them at <a href=\"mailto:numbas@ncl.ac.uk\">numbas@ncl.ac.uk<\/a>.<\/p>\n<h3>Other recent changes<\/h3>\n<p><strong>Numbas runtime<\/strong><\/p>\n<ul>\n<li>Rather than &#8220;round your answer to 0 digits&#8221;, the number entry precision hint now says &#8220;round your answer to the nearest integer&#8221;. Thanks to Anbarasi U for picking up <a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/464\">this up-for-grabs issue<\/a>!<\/li>\n<li>You can now ask for different styles of notation when students enter numbers, or when displaying numbers to students. This will be of particular use to teachers in countries where the decimal separator is a comma instead of a full stop. (<a href=\"http:\/\/numbas-editor.readthedocs.io\/en\/latest\/number-notation.html\">docs<\/a>)<img loading=\"lazy\" class=\"aligncenter size-full wp-image-1074\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0Ssx0rXUAAOIsy.jpg\" alt=\"\" width=\"427\" height=\"406\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0Ssx0rXUAAOIsy.jpg 427w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0Ssx0rXUAAOIsy-300x285.jpg 300w\" sizes=\"(max-width: 427px) 100vw, 427px\" \/><\/li>\n<li>When there&#8217;s an error processing some LaTeX, the error message now tries to make it easier to pin down where the error occurred by giving some context. Thanks to Bernhard von Stengel for suggesting this. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/468\">issue<\/a>)<\/li>\n<li>You can\u00a0set the value of an HTML tag&#8217;s attribute based on question variables by adding an attribute of the form <code>eval-&lt;attribute&gt;<\/code>. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/449\">issue<\/a>, <a href=\"https:\/\/numbas.mathcentre.ac.uk\/question\/18650\/set-an-html-element-s-attributes-based-on-a-question-variable\/\">example<\/a>)<\/li>\n<li>There is now a &#8220;dictionary&#8221; data type in JME &#8211; a structure mapping string keys to values. This makes working with JSON data much easier! (<a href=\"http:\/\/numbas-editor.readthedocs.io\/en\/latest\/jme-reference.html#dict\">docs<\/a>, <a href=\"https:\/\/numbas.mathcentre.ac.uk\/exam\/4684\/working-with-json-data\/\">examples<\/a>)<\/li>\n<li>An error is thrown if you try to ask for a negative number of decimal places or significant figures for a number entry part. Thanks to Kaustubh Mallik for picking up <a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/466\">this up-for-grabs issue<\/a>!<\/li>\n<li>Each part now has a &#8220;show feedback icon&#8221; option, which is on by default. If turned off, the tick\/cross feedback icon is not shown next to the part. Thanks to VSN Reddy Janga for picking up <a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/417\">this up-for-grabs issue<\/a>! (<a href=\"http:\/\/numbas-editor.readthedocs.io\/en\/latest\/question\/reference.html#term-show-score-feedback-icon\">docs<\/a>)<\/li>\n<li>When you reach the last question in an exam\u00a0on a device with a small screen, there&#8217;s now a big red &#8220;End exam&#8221; button in the top nav bar, so you don&#8217;t have to\u00a0slide out the main navigation. Thanks again to VSN Reddy Janga for picking up <a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/460\">this up-for-grabs issue<\/a>.<img loading=\"lazy\" class=\"aligncenter size-full wp-image-1070\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/end-exam.png\" alt=\"\" width=\"431\" height=\"67\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/end-exam.png 431w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/end-exam-300x47.png 300w\" sizes=\"(max-width: 431px) 100vw, 431px\" \/><\/li>\n<li>A compiled Numbas .zip package now contains a copy of the source .exam file, so you can restore it to the Numbas editor in future. Thanks one final time to VSN Reddy Janga for picking up <a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/413\">this up-for-grabs issue<\/a>.<\/li>\n<li>Fixed a bug where numbers in exponential form were messed up when rounding was applied. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/477\">issue<\/a>)<\/li>\n<li>Syntax errors in\u00a0the templates used by a theme to create the exam HTML are now caught when the exam is compiled. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/15277266be3cfee8fd645713a432ccf1fcdc429b\">code<\/a>)<\/li>\n<li>Negative numbers now get the same amount of whitespace around the minus symbol whether you&#8217;ve got the fractionNumbers rule turned on or not. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/3fa698070ffe90b00dfe888c2d888dcde5272eab\">code<\/a>)<\/li>\n<li>A complex exponent is bracketed correctly when rendering to JME. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/c222a2fdc83a0cd10363813d7311ab2553ad3813\">code<\/a>)<\/li>\n<li><code>sin(x)^n<\/code> is rendered in TeX as $\\sin^n(x)$, following the (inconsistent, misleading, but prevalent) convention. (and other trig functions likewise) (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/25c627d08c98d39ddb487b7621632797febaa984\">code<\/a>)<\/li>\n<li>The part feedback box is displayed even when\u00a0the question only has one part. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/1df38558f66a735c49e161d963d95cae2f4694f6\">code<\/a>)<\/li>\n<li>Exams now have a &#8220;show student name&#8221; option. Turning it off means the student&#8217;s name will not be shown\u00a0on the results page. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/fba9d7374930ee76466915faacda713b8ab5b871\">code<\/a>)<\/li>\n<li>There was a list of variable names which would never be evaluated in a question. We inherited this from our old system, because it made translating our existing bank of questions easier. This list has now been removed. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/commit\/3afb01694e81e3ab9c7342e11008168ae39e4a02\">code<\/a>)<\/li>\n<li>The maths\u00a0expression input box now updates its preview correctly in Safari on iOS. (<a href=\"https:\/\/github.com\/numbas\/Numbas\/issues\/304\">issue<\/a>)<\/li>\n<\/ul>\n<p><strong>Numbas editor<\/strong><\/p>\n<ul>\n<li>TinyMCE has been upgraded to version 4.5. This fixes a few bugs, most notably the one that led to a huge blank space when you first load the editor!<\/li>\n<li>You can now preview\u00a0a content area, with variables substituted in and maths rendered, from within the editor.<div style=\"width: 692px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1051-4\" width=\"692\" height=\"710\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0B-tT-W8AACPUT.mp4?_=4\" \/><a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0B-tT-W8AACPUT.mp4\">http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C0B-tT-W8AACPUT.mp4<\/a><\/video><\/div><\/li>\n<li>The &#8220;copy this part&#8221; button reads &#8216;gap&#8217;\/&#8217;step&#8217; as appropriate. (<a href=\"https:\/\/github.com\/numbas\/editor\/issues\/340\">issue<\/a>)<\/li>\n<li>There&#8217;s now a &#8220;JSON data&#8221; template for variable definitions, so you can just paste JSON data in and use it straight away. (<a href=\"https:\/\/github.com\/numbas\/editor\/commit\/805d042c3e75df6acbe3e03d2c940a73767a70b8\">code<\/a>)<a href=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV.jpg\"><img loading=\"lazy\" class=\"aligncenter size-main-image wp-image-1076\" src=\"http:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV-600x357.jpg\" alt=\"\" width=\"600\" height=\"357\" srcset=\"https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV-600x357.jpg 600w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV-300x178.jpg 300w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV-768x456.jpg 768w, https:\/\/www.numbas.org.uk\/wp-content\/uploads\/2017\/03\/C2TuPG_XcAE6uqV.jpg 902w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/li>\n<li>When you click the &#8220;replace with a copy&#8221; button on a question in an exam, the copy is placed in the same project as the exam. (<a href=\"https:\/\/github.com\/numbas\/editor\/issues\/348\">issue<\/a>)<\/li>\n<li>If a question is deleted while you&#8217;re editing an exam which uses that question, the reference is silently removed from the exam. (<a href=\"https:\/\/github.com\/numbas\/editor\/issues\/338\">issue<\/a>)<\/li>\n<li>The code editor\u00a0can now grow to 90% the height of the window. (<a href=\"https:\/\/github.com\/numbas\/editor\/commit\/833a5b6f3a85fe49243f294eba2fd292f83f779a\">code<\/a>, <a href=\"https:\/\/github.com\/numbas\/editor\/issues\/31\">issue<\/a>)<\/li>\n<\/ul>\n<p><strong>LTI provider<\/strong><\/p>\n<ul>\n<li>The LTI provider is now much more robust when the connection breaks. It falls back to HTTP requests when the WebSocket breaks, saves everything to local storage so it can resume when the connection is restored, even if you close the browser in-between, and shows lots of warning messages if the connection is broken for a long time. (<a href=\"https:\/\/github.com\/numbas\/numbas-lti-provider\/commit\/253d3f09bc66fdd35fc6145fa54779fb20febe9f\">code<\/a>)<\/li>\n<li>A sensible error message is shown when you try to upload something that isn&#8217;t a SCORM package. (<a href=\"https:\/\/github.com\/numbas\/numbas-lti-provider\/issues\/8\">issue<\/a>)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve made a few changes to Numbas and the editor\u00a0recently,\u00a0with the aim of improving usability. It involved moving some parts of the editor around, so I thought I&#8217;d better show what we&#8217;ve done. First of all, when\u00a0you submit an answer to a part of a Numbas question, the input changes colour depending on the score [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts\/1051"}],"collection":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/comments?post=1051"}],"version-history":[{"count":11,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts\/1051\/revisions"}],"predecessor-version":[{"id":1077,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/posts\/1051\/revisions\/1077"}],"wp:attachment":[{"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/media?parent=1051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/categories?post=1051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.numbas.org.uk\/theme-testing\/wp-json\/wp\/v2\/tags?post=1051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}