From b3b4775ffb4f4bab129a0fce0b25f4fe4fb5feb4 Mon Sep 17 00:00:00 2001
From: Stephan Robotta <stephan.robotta@bfh.ch>
Date: Wed, 13 Dec 2023 18:00:53 +0100
Subject: [PATCH] make it easier to add custom percent values as grading items

---
 amd/build/ui.min.js     |   2 +-
 amd/build/ui.min.js.map |   2 +-
 amd/src/ui.js           | 129 ++++++++++++++++++++++++++--------------
 lang/en/tiny_cloze.php  |   1 +
 styles.css              |   4 ++
 5 files changed, 90 insertions(+), 48 deletions(-)

diff --git a/amd/build/ui.min.js b/amd/build/ui.min.js
index be1dcca..628e45e 100644
--- a/amd/build/ui.min.js
+++ b/amd/build/ui.min.js
@@ -5,6 +5,6 @@ define("tiny_cloze/ui",["exports","core/modal_events","core/modal","core/modal_f
    * @module      tiny_cloze/ui
    * @copyright   2023 MoodleDACH
    * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.resolveSubquestion=_exports.onSubmit=_exports.onInit=_exports.onBeforeGetContent=_exports.displayDialogue=void 0,_modal_events=_interopRequireDefault(_modal_events),_modal2=_interopRequireDefault(_modal2),_modal_factory=_interopRequireDefault(_modal_factory),_mustache=_interopRequireDefault(_mustache);const isNull=a=>null==a,strdecode=t=>String(t).replace(/\\(#|\}|~)/g,"$1"),strencode=t=>String(t).replace(/(#|\}|~)/g,"\\$1"),indexOfNode=(list,node)=>{for(let i=0;i<list.length;i++)if(list[i]===node)return i;return-1},getUuid=function(){return isNull(crypto.randomUUID)?"ed-cloze-"+Math.floor(1e5*Math.random()).toString():crypto.randomUUID()},getFractionOptions=s=>{let html='<option value="">'+STR.incorrect+'</option><option value="="';return"="===s&&(html+=' selected="selected"'),html+=">"+STR.correct+"</option>",FRACTIONS.forEach((item=>{html+='<option value="'+item.value+'"',item.value.toString()===s&&(html+=' selected="selected"'),html+=">"+item.value+"%</option>"})),html},markerClass="cloze-question-marker",markerSpan='<span contenteditable="false" class="'+markerClass+'" data-mce-contenteditable="false">',reQtype=/\{([0-9]*):(MULTICHOICE(_H|_V|_S|_HS|_VS)?|MULTIRESPONSE(_H|_S|_HS)?|NUMERICAL|SHORTANSWER(_C)?|SAC?|NM|MWC?|M[CR](V|H|VS|HS)?):(.*?)\}/g,CSS={ANSWER:"tiny_cloze_answer",ANSWERS:"tiny_cloze_answers",ADD:"tiny_cloze_add",CANCEL:"tiny_cloze_cancel",DELETE:"tiny_cloze_delete",FEEDBACK:"tiny_cloze_feedback",FRACTION:"tiny_cloze_fraction",LEFT:"tiny_cloze_col0",LOWER:"tiny_cloze_down",RIGHT:"tiny_cloze_col1",MARKS:"tiny_cloze_marks",DUPLICATE:"tiny_cloze_duplicate",RAISE:"tiny_cloze_up",SUBMIT:"tiny_cloze_submit",SUMMARY:"tiny_cloze_summary",TOLERANCE:"tiny_cloze_tolerance",TYPE:"tiny_cloze_qtype"},TEMPLATE={FORM:'<div class="tiny_cloze"><p>{{name}} ({{qtype}})</p><form name="tiny_cloze_form"><div class="row ml-0"><div class="form-group"><label for="{{elementid}}_mark">{{STR.defaultmark}}</label><input id="{{elementid}}_mark" type="text" value="{{marks}}" class="{{CSS.MARKS}} form-control d-inline mx-1" /><a class="{{CSS.ADD}}" title="{{STR.addmoreanswerblanks}}"><img class="icon_smallicon" src="'+M.util.image_url("t/add","core")+'"></a></div></div><div class="{{CSS.ANSWERS}} mb-3"><ol class="pl-3">{{#answerdata}}<li class="mt-3"><div class="row ml-0"><div class="{{CSS.LEFT}} form-group"><label for="{{id}}_answer">{{STR.answer}}</label><input id="{{id}}_answer" type="text" value="{{answer}}" class="{{CSS.ANSWER}} form-control d-inline mx-2" /></div><div class="{{CSS.LEFT}} form-group"><a class="{{CSS.ADD}}" title="{{STR.addmoreanswerblanks}}"><img class="icon_smallicon" src="'+M.util.image_url("t/add","core")+'"></a><a class="{{CSS.DELETE}}" title="{{STR.delete}}"><img class="icon_smallicon" src="'+M.util.image_url("t/delete","core")+'"></a><a class="{{CSS.RAISE}}" title="{{STR.up}}"><img class="icon_smallicon" src="'+M.util.image_url("t/up","core")+'"></a><a class="{{CSS.LOWER}}" title="{{STR.down}}"><img class="icon_smallicon" src="'+M.util.image_url("t/down","core")+'"></a></div></div>{{#numerical}}<div class="row"><div class="{{CSS.RIGHT}} form-group"><label for="{{id}}_tolerance">{{{STR.tolerance}}}</label><input id="{{id}}_tolerance" type="text" value="{{tolerance}}" class="{{CSS.TOLERANCE}} form-control d-inline mx-2" /></div></div>{{/numerical}}<div class="row"><div class="{{CSS.RIGHT}} form-group"><label for="{{id}}_feedback">{{STR.feedback}}</label><input id="{{id}}_feedback" type="text" value="{{feedback}}" class="{{CSS.FEEDBACK}} form-control d-inline mx-2" /></div><div class="{{CSS.RIGHT}} form-group"><label id="{{id}}_grade">{{STR.grade}}</label><select id="{{id}}_grade" class="{{CSS.FRACTION}} custom-select mx-2">{{{fractionOptions}}}</select></div></div></li>{{/answerdata}}</ol></div></form></div>',TYPE:'<div class="tiny_cloze mt-0 mx-2 mb-2"><p>{{STR.chooseqtypetoadd}}</p><form name="tiny_cloze_form"><div class="{{CSS.TYPE}} form-check">{{#types}}<div class="option"><input name="qtype" id="qtype_qtype_{{type}}" value="{{type}}" type="radio" class="form-check-input"><label for="qtype_qtype_{{type}}"><span class="typename">{{type}}</span><span class="{{CSS.SUMMARY}}"><h6>{{name}}</h6><p>{{summary}}</p><ul>{{#options}}<li>{{.}}</li>{{/options}}</ul></span></label></div>{{/types}}</div></form></div>',FOOTER:'<button type="button" class="btn btn-secondary" data-action="cancel">{{cancel}}</button><button type="button" class="btn btn-primary" data-action="save">{{submit}}</button>'},FRACTIONS=[{value:100},{value:50},{value:33.33333},{value:25},{value:20},{value:16.66667},{value:14.28571},{value:12.5},{value:11.11111},{value:10},{value:5},{value:0},{value:-5},{value:-10},{value:-11.11111},{value:-12.5},{value:-14.28571},{value:-16.66667},{value:-20},{value:-25},{value:-33.333},{value:-50},{value:-100}];let STR={};const getQuestionTypes=function(){return[{type:"MULTICHOICE",abbr:["MC"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.selectinline,STR.singleyes]},{type:"MULTICHOICE_H",abbr:["MCH"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.horizontal,STR.singleyes]},{type:"MULTICHOICE_V",abbr:["MCV"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.vertical,STR.singleyes]},{type:"MULTICHOICE_S",abbr:["MCS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.selectinline,STR.shuffle,STR.singleyes]},{type:"MULTICHOICE_HS",abbr:["MCHS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.horizontal,STR.shuffle,STR.singleyes]},{type:"MULTICHOICE_VS",abbr:["MCVS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.vertical,STR.shuffle,STR.singleyes]},{type:"MULTIRESPONSE",abbr:["MR"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_vertical,STR.singleno]},{type:"MULTIRESPONSE_H",abbr:["MRH"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_horizontal,STR.singleno]},{type:"MULTIRESPONSE_S",abbr:["MRS"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_vertical,STR.shuffle,STR.singleno]},{type:"MULTIRESPONSE_HS",abbr:["MRHS"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_horizontal,STR.shuffle,STR.singleno]},{type:"NUMERICAL",abbr:["NM"],name:STR.numerical,summary:STR.summary_numerical},{type:"SHORTANSWER",abbr:["SA","MW"],name:STR.shortanswer,summary:STR.summary_shortanswer,options:[STR.caseno]},{type:"SHORTANSWER_C",abbr:["SAC","MWC"],name:STR.shortanswer,summary:STR.summary_shortanswer,options:[STR.caseyes]}]};let _editor=null,_form=null,_answerdata=[],_qtype=null,_selectedOffset=-1,_marks=1,_modal=null;_exports.onInit=function(ed){_editor=ed,_addMarkers(),(async()=>{const res=await Promise.all([(0,_str.get_string)("answer","question"),(0,_str.get_string)("chooseqtypetoadd","question"),(0,_str.get_string)("defaultmark","question"),(0,_str.get_string)("feedback","question"),(0,_str.get_string)("correct","question"),(0,_str.get_string)("incorrect","question"),(0,_str.get_string)("addmoreanswerblanks","qtype_calculated"),(0,_str.get_string)("delete","core"),(0,_str.get_string)("up","core"),(0,_str.get_string)("down","core"),(0,_str.get_string)("tolerance","qtype_calculated"),(0,_str.get_string)("grade","grades"),(0,_str.get_string)("caseno","mod_quiz"),(0,_str.get_string)("caseyes","mod_quiz"),(0,_str.get_string)("answersingleno","qtype_multichoice"),(0,_str.get_string)("answersingleyes","qtype_multichoice"),(0,_str.get_string)("layoutselectinline","qtype_multianswer"),(0,_str.get_string)("layouthorizontal","qtype_multianswer"),(0,_str.get_string)("layoutvertical","qtype_multianswer"),(0,_str.get_string)("shufflewithin","mod_quiz"),(0,_str.get_string)("layoutmultiple_horizontal","qtype_multianswer"),(0,_str.get_string)("layoutmultiple_vertical","qtype_multianswer"),(0,_str.get_string)("pluginnamesummary","qtype_multichoice"),(0,_str.get_string)("pluginnamesummary","qtype_shortanswer"),(0,_str.get_string)("pluginnamesummary","qtype_numerical"),(0,_str.get_string)("multichoice",_common.component),(0,_str.get_string)("multiresponse",_common.component),(0,_str.get_string)("numerical","mod_quiz"),(0,_str.get_string)("shortanswer","mod_quiz"),(0,_str.get_string)("cancel","core"),(0,_str.get_string)("select",_common.component),(0,_str.get_string)("insert",_common.component),(0,_str.get_string)("pluginname",_common.component)]);["answer","chooseqtypetoadd","defaultmark","feedback","correct","incorrect","addmoreanswerblanks","delete","up","down","tolerance","grade","caseno","caseyes","singleno","singleyes","selectinline","horizontal","vertical","shuffle","multi_horizontal","multi_vertical","summary_multichoice","summary_shortanswer","summary_numerical","multichoice","multiresponse","numerical","shortanswer","btn_cancel","btn_select","btn_insert","title"].map(((l,i)=>(STR[l]=res[i],"")))})()};const _createModal=async function(){const cfg={title:STR.title,templateContext:{elementid:_editor.id},removeOnClose:!0,large:!0};_modal="function"==typeof _modal2.default.create?await _modal2.default.create(cfg):await _modal_factory.default.create(cfg)};_exports.displayDialogue=async function(){await _createModal();var subquestion=resolveSubquestion();subquestion?(_selectedOffset=indexOfNode(_editor.dom.select("."+markerClass),subquestion),_parseSubquestion(subquestion.innerHTML),_setDialogueContent(_qtype)):(_selectedOffset=-1,_setDialogueContent())};const _addMarkers=function(){let m,content=_editor.getContent(),newContent="";if(-1===content.indexOf(markerClass)){do{if(m=content.match(reQtype),!m){newContent+=content;break}const pos=content.indexOf(m[0]);newContent+=content.substring(0,pos)+markerSpan+content.substring(pos,pos+m[0].length),content=content.substring(pos+m[0].length);let level=(m[0].match(/\{/g)||[]).length;if(1!==level){for(;level>1;){const a=content.indexOf("{"),b=content.indexOf("}");a>-1&&b>-1&&a<b?(level++,newContent=content.substring(0,a),content=content.substring(a+1)):b>-1?(newContent=content.substring(0,b),content=content.substring(b+1),level--):level=1}newContent+="</span>"}else newContent+="</span>"}while(m);_editor.setContent(newContent)}},_removeMarkers=function(){for(const span of _editor.dom.select("span."+markerClass))_editor.dom.setOuterHTML(span,span.classList.contains("new")?"":span.innerHTML)};_exports.onBeforeGetContent=function(content){if(!isNull(content.source_view)&&!0===content.source_view){var onClose=function(){_editor.off("close",onClose),_addMarkers()};_editor.on("CloseWindow",(()=>{onClose()})),_modal||_removeMarkers()}};_exports.onSubmit=function(){_removeMarkers()};const _setDialogueContent=function(qtype,nomodalevents){const footer=_mustache.default.render(TEMPLATE.FOOTER,{cancel:STR.btn_cancel,submit:qtype?STR.btn_insert:STR.btn_select});let contentText;contentText=qtype?_mustache.default.render(TEMPLATE.FORM,{CSS:CSS,STR:STR,answerdata:_answerdata,elementid:getUuid(),qtype:_qtype,name:getQuestionTypes().filter((q=>_qtype===q.type))[0].name,marks:_marks,numerical:"NUMERICAL"===_qtype||"NM"===_qtype}):_mustache.default.render(TEMPLATE.TYPE,{CSS:CSS,STR:STR,qtype:_qtype,types:getQuestionTypes()}),_modal.setBody(contentText),_modal.setFooter(footer),_modal.show();const $root=_modal.getRoot();if(_form=$root.get(0).querySelector("form"),!nomodalevents){if(_modal.registerEventListeners(),_modal.registerCloseOnSave(),_modal.registerCloseOnCancel(),$root.on(_modal_events.default.cancel,_cancel),!qtype)return void $root.on(_modal_events.default.save,_choiceHandler);$root.on(_modal_events.default.save,_setSubquestion)}const getTarget=e=>{let p=e.target;for(;!isNull(p)&&1===p.nodeType&&"A"!==p.tagName;)p=p.parentNode;return isNull(p.classList)?null:p};_form.addEventListener("click",(e=>{const p=getTarget(e);if(!isNull(p))return p.classList.contains(CSS.DELETE)?(e.preventDefault(),void _deleteAnswer(p)):p.classList.contains(CSS.ADD)?(e.preventDefault(),void _addAnswer(p)):p.classList.contains(CSS.LOWER)?(e.preventDefault(),void _lowerAnswer(p)):void(p.classList.contains(CSS.RAISE)&&(e.preventDefault(),_raiseAnswer(p)))})),_form.addEventListener("keyup",(e=>{const p=getTarget(e);isNull(p)||(p.classList.contains(CSS.ANSWER)||p.classList.contains(CSS.FEEDBACK))&&(e.preventDefault(),_addAnswer(p))}))},_choiceHandler=function(e){e.preventDefault();let qtype=_form.querySelector("input[name=qtype]:checked");qtype&&(_qtype=qtype.value);const one=-1!==_qtype.indexOf("SHORTANSWER")||"NUMERICAL"===_qtype,blankAnswer={id:getUuid(),answer:"",feedback:"",fraction:100,fractionOptions:getFractionOptions(one?"=":""),tolerance:0};_answerdata=one?[blankAnswer]:[blankAnswer,blankAnswer,blankAnswer],_modal.destroy(),_createModal().then((()=>(_setDialogueContent(_qtype),_form.querySelector("."+CSS.ANSWER).focus(),""))).catch((()=>""))},_parseSubquestion=function(question){_answerdata=[];const parts=reQtype.exec(question);if(reQtype.lastIndex=0,!parts)return;_marks=parts[1],_qtype=parts[2],_qtype.length<5&&getQuestionTypes().forEach((l=>{for(const a of l.abbr)if(a===_qtype)return void(_qtype=l.type)}));const answers=parts[7].match(/(\\.|[^~])*/g);answers&&answers.forEach((function(answer){const options=/^(%(-?[.0-9]+)%|(=?))((\\.|[^#])*)#?(.*)/.exec(answer);if(options&&options[4]){let frac=0;if(options[3]?frac="="===options[3]?"=":100:options[2]&&(frac=options[2]),"NUMERICAL"===_qtype||"NM"===_qtype){const tolerance=/^([^:]*):?(.*)/.exec(options[4])[2]||0;return void _answerdata.push({id:getUuid(),answer:strdecode(options[4].replace(/:.*/,"")),feedback:strdecode(options[6]),tolerance:tolerance,fraction:frac,fractionOptions:getFractionOptions(frac)})}_answerdata.push({answer:strdecode(options[4]),id:getUuid(),feedback:strdecode(options[6]),fraction:frac,fractionOptions:getFractionOptions(frac)})}}))},_addAnswer=function(a){let index=indexOfNode(_form.querySelectorAll("."+CSS.ADD),a);-1===index&&(index=indexOfNode(_form.querySelectorAll("."+CSS.ANSWER+", ."+CSS.FEEDBACK),a),-1!==index&&(index=Math.floor(index/2)+1));let fraction="";a.closest("li")&&(fraction=a.closest("li").querySelector("."+CSS.FRACTION).value,index=indexOfNode(_form.querySelectorAll("li"),a.closest("li"))+1);let tolerance=0;a.closest("li")&&a.closest("li").querySelector("."+CSS.TOLERANCE)&&(tolerance=a.closest("li").querySelector("."+CSS.TOLERANCE).value),_getFormData(),_answerdata.splice(index,0,{id:getUuid(),answer:"",feedback:"",fraction:fraction,fractionOptions:getFractionOptions(fraction),tolerance:tolerance}),_setDialogueContent(_qtype,!0),_form.querySelectorAll("."+CSS.ANSWER).item(index).focus()},_deleteAnswer=function(a){let index=indexOfNode(_form.querySelectorAll("."+CSS.DELETE),a);-1===index&&(index=indexOfNode(_form.querySelectorAll("li"),a.closest("li"))),_getFormData(),_answerdata.splice(index,1),_setDialogueContent(_qtype,!0);const answers=_form.querySelectorAll("."+CSS.ANSWER);index=Math.min(index,answers.length-1),answers.item(index).focus()},_lowerAnswer=function(a){const li=a.closest("li");li.before(li.nextSibling),li.querySelector("."+CSS.ANSWER).focus()},_raiseAnswer=function(a){const li=a.closest("li");li.after(li.previousSibling),li.querySelector("."+CSS.ANSWER).focus()},_cancel=function(e){e.preventDefault();for(const span of _editor.dom.select("."+markerClass+".new"))span.remove();_modal.destroy(),_editor.focus(),_modal=null},_setSubquestion=function(e){e.preventDefault(),_getFormData();let question="{"+_marks+":"+_qtype+":";for(let i=0;i<_answerdata.length;i++)question+=_answerdata[i].fraction&&!isNaN(_answerdata[i].fraction)?"%"+_answerdata[i].fraction+"%":_answerdata[i].fraction,question+=strencode(_answerdata[i].answer),_answerdata[i].tolerance&&(question+=":"+_answerdata[i].tolerance),_answerdata[i].feedback&&(question+="#"+strencode(_answerdata[i].feedback)),i<_answerdata.length-1&&(question+="~");question+="}",_modal.destroy(),_modal=null,_editor.focus(),_selectedOffset>-1?_editor.dom.select("."+markerClass)[_selectedOffset].innerHTML=question:_editor.insertContent(markerSpan+question+"</span>")},_getFormData=function(){let answer;_answerdata=[];const answers=_form.querySelectorAll("."+CSS.ANSWER),feedbacks=_form.querySelectorAll("."+CSS.FEEDBACK),fractions=_form.querySelectorAll("."+CSS.FRACTION),tolerances=_form.querySelectorAll("."+CSS.TOLERANCE);for(let i=0;i<answers.length;i++)answer=answers.item(i).value,"NM"!==_qtype&&"NUMERICAL"!==_qtype||(answer=Number(answer)),_answerdata.push({answer:answer,id:getUuid(),feedback:feedbacks.item(i).value,fraction:fractions.item(i).value,fractionOptions:getFractionOptions(fractions.item(i).value),tolerance:isNull(tolerances.item(i))?0:tolerances.item(i).value}),_marks=_form.querySelector("."+CSS.MARKS).value},resolveSubquestion=function(){let span=_editor.selection.getStart();return!isNull(span.classList)&&span.classList.contains(markerClass)?span:(_editor.dom.getParents(span,(elm=>!(isNull(elm.classList)||!elm.classList.contains(markerClass))&&elm)),!1)};_exports.resolveSubquestion=resolveSubquestion}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.resolveSubquestion=_exports.onSubmit=_exports.onInit=_exports.onBeforeGetContent=_exports.displayDialogue=void 0,_modal_events=_interopRequireDefault(_modal_events),_modal2=_interopRequireDefault(_modal2),_modal_factory=_interopRequireDefault(_modal_factory),_mustache=_interopRequireDefault(_mustache);const isNull=a=>null==a,strdecode=t=>String(t).replace(/\\(#|\}|~)/g,"$1"),strencode=t=>String(t).replace(/(#|\}|~)/g,"\\$1"),indexOfNode=(list,node)=>{for(let i=0;i<list.length;i++)if(list[i]===node)return i;return-1},getUuid=function(){return isNull(crypto.randomUUID)?"ed-cloze-"+Math.floor(1e5*Math.random()).toString():crypto.randomUUID()},getFractionOptions=s=>{const attrSel=' selected="selected"';let isSel="="===s?attrSel:"",html='<option value="">'.concat(STR.incorrect,'</option><option value="="').concat(isSel,">").concat(STR.correct,"</option>");return FRACTIONS.forEach((item=>{isSel=item.value.toString()===s?attrSel:"",html+='<option value="'.concat(item.value,'"').concat(isSel,">").concat(item.value,"%</option>")})),isSel=""!==s&&-1===html.indexOf(attrSel)?attrSel:"",html+='<option value="'.concat("__custom__",'"').concat(isSel,">").concat(STR.custom_grade,"</option>"),html},isCustomGrade=s=>{if("="===s||""===s)return!1;let found=!1;return FRACTIONS.forEach((item=>{item.value.toString()===s&&(found=!0)})),!found},markerClass="cloze-question-marker",markerSpan='<span contenteditable="false" class="'+markerClass+'" data-mce-contenteditable="false">',reQtype=/\{([0-9]*):(MULTICHOICE(_H|_V|_S|_HS|_VS)?|MULTIRESPONSE(_H|_S|_HS)?|NUMERICAL|SHORTANSWER(_C)?|SAC?|NM|MWC?|M[CR](V|H|VS|HS)?):(.*?)\}/g,CSS={ANSWER:"tiny_cloze_answer",ANSWERS:"tiny_cloze_answers",ADD:"tiny_cloze_add",CANCEL:"tiny_cloze_cancel",DELETE:"tiny_cloze_delete",FEEDBACK:"tiny_cloze_feedback",FRACTION:"tiny_cloze_fraction",FRAC_CUSTOM:"tiny_cloze_frac_custom",LEFT:"tiny_cloze_col0",LOWER:"tiny_cloze_down",RIGHT:"tiny_cloze_col1",MARKS:"tiny_cloze_marks",DUPLICATE:"tiny_cloze_duplicate",RAISE:"tiny_cloze_up",SUBMIT:"tiny_cloze_submit",SUMMARY:"tiny_cloze_summary",TOLERANCE:"tiny_cloze_tolerance",TYPE:"tiny_cloze_qtype"},TEMPLATE={FORM:'<div class="tiny_cloze"><p>{{name}} ({{qtype}})</p><form name="tiny_cloze_form"><div class="row ml-0"><div class="form-group"><label for="{{elementid}}_mark">{{STR.defaultmark}}</label><input id="{{elementid}}_mark" type="text" value="{{marks}}" class="{{CSS.MARKS}} form-control d-inline mx-1" /><a class="{{CSS.ADD}}" title="{{STR.addmoreanswerblanks}}"><img class="icon_smallicon" src="'+M.util.image_url("t/add","core")+'"></a></div></div><div class="{{CSS.ANSWERS}} mb-3"><ol class="pl-3">{{#answerdata}}<li class="mt-3"><div class="row ml-0"><div class="{{CSS.LEFT}} form-group"><label for="{{id}}_answer">{{STR.answer}}</label><input id="{{id}}_answer" type="text" value="{{answer}}" class="{{CSS.ANSWER}} form-control d-inline mx-2" /></div><div class="{{CSS.LEFT}} form-group"><a class="{{CSS.ADD}}" title="{{STR.addmoreanswerblanks}}"><img class="icon_smallicon" src="'+M.util.image_url("t/add","core")+'"></a><a class="{{CSS.DELETE}}" title="{{STR.delete}}"><img class="icon_smallicon" src="'+M.util.image_url("t/delete","core")+'"></a><a class="{{CSS.RAISE}}" title="{{STR.up}}"><img class="icon_smallicon" src="'+M.util.image_url("t/up","core")+'"></a><a class="{{CSS.LOWER}}" title="{{STR.down}}"><img class="icon_smallicon" src="'+M.util.image_url("t/down","core")+'"></a></div></div>{{#numerical}}<div class="row"><div class="{{CSS.RIGHT}} form-group"><label for="{{id}}_tolerance">{{{STR.tolerance}}}</label><input id="{{id}}_tolerance" type="text" value="{{tolerance}}" class="{{CSS.TOLERANCE}} form-control d-inline mx-2" /></div></div>{{/numerical}}<div class="row"><div class="{{CSS.RIGHT}} form-group"><label for="{{id}}_feedback">{{STR.feedback}}</label><input id="{{id}}_feedback" type="text" value="{{feedback}}" class="{{CSS.FEEDBACK}} form-control d-inline mx-2" /></div><div class="{{CSS.RIGHT}} form-group"><label id="{{id}}_grade">{{STR.grade}}</label><select id="{{id}}_grade" class="{{CSS.FRACTION}} custom-select mx-2">{{{fractionOptions}}}</select></div><div class="{{CSS.RIGHT}} form-group{{^isCustomGrade}} hidden{{/isCustomGrade}}"><input id="{{id}}_grade_custom" type="text"{{#isCustomGrade}} value="{{fraction}}"{{/isCustomGrade}} class="{{CSS.FRAC_CUSTOM}} form-control d-inline mx-2" style="width: 4rem;" />%</div></div></li>{{/answerdata}}</ol></div></form></div>',TYPE:'<div class="tiny_cloze mt-0 mx-2 mb-2"><p>{{STR.chooseqtypetoadd}}</p><form name="tiny_cloze_form"><div class="{{CSS.TYPE}} form-check">{{#types}}<div class="option"><input name="qtype" id="qtype_qtype_{{type}}" value="{{type}}" type="radio" class="form-check-input"><label for="qtype_qtype_{{type}}"><span class="typename">{{type}}</span><span class="{{CSS.SUMMARY}}"><h6>{{name}}</h6><p>{{summary}}</p><ul>{{#options}}<li>{{.}}</li>{{/options}}</ul></span></label></div>{{/types}}</div></form></div>',FOOTER:'<button type="button" class="btn btn-secondary" data-action="cancel">{{cancel}}</button><button type="button" class="btn btn-primary" data-action="save">{{submit}}</button>'},FRACTIONS=[{value:100},{value:50},{value:0}];let STR={};const getQuestionTypes=function(){return[{type:"MULTICHOICE",abbr:["MC"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.selectinline,STR.singleyes]},{type:"MULTICHOICE_H",abbr:["MCH"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.horizontal,STR.singleyes]},{type:"MULTICHOICE_V",abbr:["MCV"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.vertical,STR.singleyes]},{type:"MULTICHOICE_S",abbr:["MCS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.selectinline,STR.shuffle,STR.singleyes]},{type:"MULTICHOICE_HS",abbr:["MCHS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.horizontal,STR.shuffle,STR.singleyes]},{type:"MULTICHOICE_VS",abbr:["MCVS"],name:STR.multichoice,summary:STR.summary_multichoice,options:[STR.vertical,STR.shuffle,STR.singleyes]},{type:"MULTIRESPONSE",abbr:["MR"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_vertical,STR.singleno]},{type:"MULTIRESPONSE_H",abbr:["MRH"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_horizontal,STR.singleno]},{type:"MULTIRESPONSE_S",abbr:["MRS"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_vertical,STR.shuffle,STR.singleno]},{type:"MULTIRESPONSE_HS",abbr:["MRHS"],name:STR.multiresponse,summary:STR.summary_multichoice,options:[STR.multi_horizontal,STR.shuffle,STR.singleno]},{type:"NUMERICAL",abbr:["NM"],name:STR.numerical,summary:STR.summary_numerical},{type:"SHORTANSWER",abbr:["SA","MW"],name:STR.shortanswer,summary:STR.summary_shortanswer,options:[STR.caseno]},{type:"SHORTANSWER_C",abbr:["SAC","MWC"],name:STR.shortanswer,summary:STR.summary_shortanswer,options:[STR.caseyes]}]};let _editor=null,_form=null,_answerdata=[],_qtype=null,_selectedOffset=-1,_marks=1,_modal=null;_exports.onInit=function(ed){_editor=ed,_addMarkers(),(async()=>{const res=await Promise.all([(0,_str.get_string)("answer","question"),(0,_str.get_string)("chooseqtypetoadd","question"),(0,_str.get_string)("defaultmark","question"),(0,_str.get_string)("feedback","question"),(0,_str.get_string)("correct","question"),(0,_str.get_string)("incorrect","question"),(0,_str.get_string)("addmoreanswerblanks","qtype_calculated"),(0,_str.get_string)("delete","core"),(0,_str.get_string)("up","core"),(0,_str.get_string)("down","core"),(0,_str.get_string)("tolerance","qtype_calculated"),(0,_str.get_string)("grade","grades"),(0,_str.get_string)("caseno","mod_quiz"),(0,_str.get_string)("caseyes","mod_quiz"),(0,_str.get_string)("answersingleno","qtype_multichoice"),(0,_str.get_string)("answersingleyes","qtype_multichoice"),(0,_str.get_string)("layoutselectinline","qtype_multianswer"),(0,_str.get_string)("layouthorizontal","qtype_multianswer"),(0,_str.get_string)("layoutvertical","qtype_multianswer"),(0,_str.get_string)("shufflewithin","mod_quiz"),(0,_str.get_string)("layoutmultiple_horizontal","qtype_multianswer"),(0,_str.get_string)("layoutmultiple_vertical","qtype_multianswer"),(0,_str.get_string)("pluginnamesummary","qtype_multichoice"),(0,_str.get_string)("pluginnamesummary","qtype_shortanswer"),(0,_str.get_string)("pluginnamesummary","qtype_numerical"),(0,_str.get_string)("multichoice",_common.component),(0,_str.get_string)("multiresponse",_common.component),(0,_str.get_string)("numerical","mod_quiz"),(0,_str.get_string)("shortanswer","mod_quiz"),(0,_str.get_string)("cancel","core"),(0,_str.get_string)("select",_common.component),(0,_str.get_string)("insert",_common.component),(0,_str.get_string)("pluginname",_common.component),(0,_str.get_string)("customgrade",_common.component)]);["answer","chooseqtypetoadd","defaultmark","feedback","correct","incorrect","addmoreanswerblanks","delete","up","down","tolerance","grade","caseno","caseyes","singleno","singleyes","selectinline","horizontal","vertical","shuffle","multi_horizontal","multi_vertical","summary_multichoice","summary_shortanswer","summary_numerical","multichoice","multiresponse","numerical","shortanswer","btn_cancel","btn_select","btn_insert","title","custom_grade"].map(((l,i)=>(STR[l]=res[i],"")))})()};const _createModal=async function(){const cfg={title:STR.title,templateContext:{elementid:_editor.id},removeOnClose:!0,large:!0};_modal="function"==typeof _modal2.default.create?await _modal2.default.create(cfg):await _modal_factory.default.create(cfg)};_exports.displayDialogue=async function(){await _createModal();var subquestion=resolveSubquestion();subquestion?(_selectedOffset=indexOfNode(_editor.dom.select("."+markerClass),subquestion),_parseSubquestion(subquestion.innerHTML),_setDialogueContent(_qtype)):(_selectedOffset=-1,_setDialogueContent())};const _addMarkers=function(){let m,content=_editor.getContent(),newContent="";if(-1===content.indexOf(markerClass)){do{if(m=content.match(reQtype),!m){newContent+=content;break}const pos=content.indexOf(m[0]);newContent+=content.substring(0,pos)+markerSpan+content.substring(pos,pos+m[0].length),content=content.substring(pos+m[0].length);let level=(m[0].match(/\{/g)||[]).length;if(1!==level){for(;level>1;){const a=content.indexOf("{"),b=content.indexOf("}");a>-1&&b>-1&&a<b?(level++,newContent=content.substring(0,a),content=content.substring(a+1)):b>-1?(newContent=content.substring(0,b),content=content.substring(b+1),level--):level=1}newContent+="</span>"}else newContent+="</span>"}while(m);_editor.setContent(newContent)}},_removeMarkers=function(){for(const span of _editor.dom.select("span."+markerClass))_editor.dom.setOuterHTML(span,span.classList.contains("new")?"":span.innerHTML)};_exports.onBeforeGetContent=function(content){if(!isNull(content.source_view)&&!0===content.source_view){var onClose=function(){_editor.off("close",onClose),_addMarkers()};_editor.on("CloseWindow",(()=>{onClose()})),_modal||_removeMarkers()}};_exports.onSubmit=function(){_removeMarkers()};const _setDialogueContent=function(qtype,nomodalevents){const footer=_mustache.default.render(TEMPLATE.FOOTER,{cancel:STR.btn_cancel,submit:qtype?STR.btn_insert:STR.btn_select});let contentText;contentText=qtype?_mustache.default.render(TEMPLATE.FORM,{CSS:CSS,STR:STR,answerdata:_answerdata,elementid:getUuid(),qtype:_qtype,name:getQuestionTypes().filter((q=>_qtype===q.type))[0].name,marks:_marks,numerical:"NUMERICAL"===_qtype||"NM"===_qtype}):_mustache.default.render(TEMPLATE.TYPE,{CSS:CSS,STR:STR,qtype:_qtype,types:getQuestionTypes()}),_modal.setBody(contentText),_modal.setFooter(footer),_modal.show();const $root=_modal.getRoot();if(_form=$root.get(0).querySelector("form"),!nomodalevents){if(_modal.registerEventListeners(),_modal.registerCloseOnSave(),_modal.registerCloseOnCancel(),$root.on(_modal_events.default.cancel,_cancel),!qtype)return void $root.on(_modal_events.default.save,_choiceHandler);$root.on(_modal_events.default.save,_setSubquestion)}const getTarget=e=>{let p=e.target;for(;!isNull(p)&&1===p.nodeType&&"A"!==p.tagName;)p=p.parentNode;return isNull(p.classList)?null:p};_form.addEventListener("click",(e=>{const p=getTarget(e);if(!isNull(p))return p.classList.contains(CSS.DELETE)?(e.preventDefault(),void _deleteAnswer(p)):p.classList.contains(CSS.ADD)?(e.preventDefault(),void _addAnswer(p)):p.classList.contains(CSS.LOWER)?(e.preventDefault(),void _lowerAnswer(p)):void(p.classList.contains(CSS.RAISE)&&(e.preventDefault(),_raiseAnswer(p)))})),_form.addEventListener("keyup",(e=>{const p=getTarget(e);isNull(p)||(p.classList.contains(CSS.ANSWER)||p.classList.contains(CSS.FEEDBACK))&&(e.preventDefault(),_addAnswer(p))})),_form.querySelectorAll("."+CSS.FRACTION).forEach((sel=>{sel.addEventListener("change",(e=>{const id=e.target.getAttribute("id");"__custom__"===e.target.value?document.getElementById(id+"_custom").parentNode.classList.remove("hidden"):document.getElementById(id+"_custom").parentNode.classList.add("hidden")}))}))},_choiceHandler=function(e){e.preventDefault();let qtype=_form.querySelector("input[name=qtype]:checked");qtype&&(_qtype=qtype.value);const max=-1!==_qtype.indexOf("SHORTANSWER")||"NUMERICAL"===_qtype?1:3,blankAnswer={id:getUuid(),answer:"",feedback:"",fraction:100,fractionOptions:getFractionOptions(1===max?"=":""),tolerance:0,isCustomGrade:!1};_answerdata=[];for(let x=0;x<max;x++)_answerdata.push({...blankAnswer,id:getUuid()});_modal.destroy(),_createModal().then((()=>(_setDialogueContent(_qtype),_form.querySelector("."+CSS.ANSWER).focus(),""))).catch((()=>""))},_parseSubquestion=function(question){_answerdata=[];const parts=reQtype.exec(question);if(reQtype.lastIndex=0,!parts)return;_marks=parts[1],_qtype=parts[2],_qtype.length<5&&getQuestionTypes().forEach((l=>{for(const a of l.abbr)if(a===_qtype)return void(_qtype=l.type)}));const answers=parts[7].match(/(\\.|[^~])*/g);answers&&answers.forEach((function(answer){const options=/^(%(-?[.0-9]+)%|(=?))((\\.|[^#])*)#?(.*)/.exec(answer);if(options&&options[4]){let frac="";if(options[3]?frac="="===options[3]?"=":100:options[2]&&(frac=options[2]),"NUMERICAL"===_qtype||"NM"===_qtype){const tolerance=/^([^:]*):?(.*)/.exec(options[4])[2]||0;return void _answerdata.push({id:getUuid(),answer:strdecode(options[4].replace(/:.*/,"")),feedback:strdecode(options[6]),tolerance:tolerance,fraction:frac,fractionOptions:getFractionOptions(frac),isCustomGrade:isCustomGrade(frac)})}_answerdata.push({answer:strdecode(options[4]),id:getUuid(),feedback:strdecode(options[6]),fraction:frac,fractionOptions:getFractionOptions(frac),isCustomGrade:isCustomGrade(frac)})}}))},_addAnswer=function(a){let index=indexOfNode(_form.querySelectorAll("."+CSS.ADD),a);-1===index&&(index=indexOfNode(_form.querySelectorAll("."+CSS.ANSWER+", ."+CSS.FEEDBACK),a),-1!==index&&(index=Math.floor(index/2)+1));let fraction="";a.closest("li")&&(fraction=a.closest("li").querySelector("."+CSS.FRACTION).value,"__custom__"===fraction&&(fraction=a.closest("li").querySelector("."+CSS.FRAC_CUSTOM).value),index=indexOfNode(_form.querySelectorAll("li"),a.closest("li"))+1);let tolerance=0;a.closest("li")&&a.closest("li").querySelector("."+CSS.TOLERANCE)&&(tolerance=a.closest("li").querySelector("."+CSS.TOLERANCE).value),_processFormData(),_answerdata.splice(index,0,{id:getUuid(),answer:"",feedback:"",fraction:fraction,fractionOptions:getFractionOptions(fraction),tolerance:tolerance,isCustomGrade:isCustomGrade(fraction)}),_setDialogueContent(_qtype,!0),_form.querySelectorAll("."+CSS.ANSWER).item(index).focus()},_deleteAnswer=function(a){let index=indexOfNode(_form.querySelectorAll("."+CSS.DELETE),a);-1===index&&(index=indexOfNode(_form.querySelectorAll("li"),a.closest("li"))),_processFormData(),_answerdata.splice(index,1),_setDialogueContent(_qtype,!0);const answers=_form.querySelectorAll("."+CSS.ANSWER);index=Math.min(index,answers.length-1),answers.item(index).focus()},_lowerAnswer=function(a){const li=a.closest("li");li.before(li.nextSibling),li.querySelector("."+CSS.ANSWER).focus()},_raiseAnswer=function(a){const li=a.closest("li");li.after(li.previousSibling),li.querySelector("."+CSS.ANSWER).focus()},_cancel=function(e){e.preventDefault();for(const span of _editor.dom.select("."+markerClass+".new"))span.remove();_modal.destroy(),_editor.focus(),_modal=null},_setSubquestion=function(e){if(e.preventDefault(),!_processFormData(!0))return;let question="{"+_marks+":"+_qtype+":";for(let i=0;i<_answerdata.length;i++)question+=_answerdata[i].fraction&&!isNaN(_answerdata[i].fraction)?"%"+_answerdata[i].fraction+"%":_answerdata[i].fraction,question+=strencode(_answerdata[i].answer),_answerdata[i].tolerance&&(question+=":"+_answerdata[i].tolerance),_answerdata[i].feedback&&(question+="#"+strencode(_answerdata[i].feedback)),i<_answerdata.length-1&&(question+="~");question+="}",_modal.destroy(),_modal=null,_editor.focus(),_selectedOffset>-1?_editor.dom.select("."+markerClass)[_selectedOffset].innerHTML=question:_editor.insertContent(markerSpan+question+"</span>")},_processFormData=function(validate){let answer;_answerdata=[];let hasError=!1;const answers=_form.querySelectorAll("."+CSS.ANSWER),feedbacks=_form.querySelectorAll("."+CSS.FEEDBACK),fractions=_form.querySelectorAll("."+CSS.FRACTION),customGrades=_form.querySelectorAll("."+CSS.FRAC_CUSTOM),tolerances=_form.querySelectorAll("."+CSS.TOLERANCE);for(let i=0;i<answers.length;i++){customGrades.item(i).classList.remove("error"),answer=answers.item(i).value,"NM"!==_qtype&&"NUMERICAL"!==_qtype||(answer=Number(answer));const currentAnswer={answer:answer,id:getUuid(),feedback:feedbacks.item(i).value,fraction:"__custom__"===fractions.item(i).value?customGrades.item(i).value:fractions.item(i).value,fractionOptions:getFractionOptions(fractions.item(i).value),tolerance:isNull(tolerances.item(i))?0:tolerances.item(i).value,isCustomGrade:"__custom__"===fractions.item(i).value};validate&&currentAnswer.isCustomGrade&&(isNaN(currentAnswer.fraction)||currentAnswer.fraction<-100||currentAnswer.fraction>100||""===currentAnswer.fraction.trim())&&(hasError=!0,customGrades.item(i).classList.add("error")),_answerdata.push(currentAnswer),_marks=_form.querySelector("."+CSS.MARKS).value}return!hasError},resolveSubquestion=function(){let span=_editor.selection.getStart();return!isNull(span.classList)&&span.classList.contains(markerClass)?span:(_editor.dom.getParents(span,(elm=>!(isNull(elm.classList)||!elm.classList.contains(markerClass))&&elm)),!1)};_exports.resolveSubquestion=resolveSubquestion}));
 
 //# sourceMappingURL=ui.min.js.map
\ No newline at end of file
diff --git a/amd/build/ui.min.js.map b/amd/build/ui.min.js.map
index f439a37..0d70459 100644
--- a/amd/build/ui.min.js.map
+++ b/amd/build/ui.min.js.map
@@ -1 +1 @@
-{"version":3,"file":"ui.min.js","sources":["../src/ui.js"],"sourcesContent":["// This file is part of Moodle - https://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <https://www.gnu.org/licenses/>.\n\n/**\n * Plugin tiny_cloze for TinyMCE v6 in Moodle.\n *\n * @module      tiny_cloze/ui\n * @copyright   2023 MoodleDACH\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalEvents from 'core/modal_events';\nimport Modal from 'core/modal';\nimport ModalFactory from 'core/modal_factory';\nimport Mustache from 'core/mustache';\nimport {get_string as getString} from 'core/str';\nimport {component} from './common';\n\n// Helper functions.\nconst isNull = a => a === null || a === undefined;\nconst strdecode = t => String(t).replace(/\\\\(#|\\}|~)/g, '$1');\nconst strencode = t => String(t).replace(/(#|\\}|~)/g, '\\\\$1');\nconst indexOfNode = (list, node) => {\n  for (let i = 0; i < list.length; i++) {\n    if (list[i] === node) {\n      return i;\n    }\n  }\n  return -1;\n};\nconst getUuid = function() {\n  if (!isNull(crypto.randomUUID)) {\n    return crypto.randomUUID();\n  }\n  return 'ed-cloze-' + Math.floor(Math.random() * 100000).toString();\n};\n\n// This is a specific helper function to return the options html for the fraction select element.\nconst getFractionOptions = s => {\n  let html = '<option value=\"\">' + STR.incorrect + '</option><option value=\"=\"';\n  if (s === '=') {\n    html += ' selected=\"selected\"';\n  }\n  html += '>' + STR.correct + '</option>';\n  FRACTIONS.forEach(item => {\n    html += '<option value=\"' + item.value + '\"';\n    if (item.value.toString() === s) {\n      html += ' selected=\"selected\"';\n    }\n    html += '>' + item.value + '%</option>';\n  });\n  return html;\n};\n// Marker class and the whole span element that is used to encapsulate the cloze question text.\nconst markerClass = 'cloze-question-marker';\nconst markerSpan = '<span contenteditable=\"false\" class=\"' + markerClass + '\" data-mce-contenteditable=\"false\">';\n// Regex to recognize the question string in the text e.g. {1:NUMERICAL:...} or {:MULTICHOICE:...}\n// eslint-disable-next-line max-len\nconst reQtype = /\\{([0-9]*):(MULTICHOICE(_H|_V|_S|_HS|_VS)?|MULTIRESPONSE(_H|_S|_HS)?|NUMERICAL|SHORTANSWER(_C)?|SAC?|NM|MWC?|M[CR](V|H|VS|HS)?):(.*?)\\}/g;\n\n// CSS classes that are used in the modal dialogue.\nconst CSS = {\n  ANSWER: 'tiny_cloze_answer',\n  ANSWERS: 'tiny_cloze_answers',\n  ADD: 'tiny_cloze_add',\n  CANCEL: 'tiny_cloze_cancel',\n  DELETE: 'tiny_cloze_delete',\n  FEEDBACK: 'tiny_cloze_feedback',\n  FRACTION: 'tiny_cloze_fraction',\n  LEFT: 'tiny_cloze_col0',\n  LOWER: 'tiny_cloze_down',\n  RIGHT: 'tiny_cloze_col1',\n  MARKS: 'tiny_cloze_marks',\n  DUPLICATE: 'tiny_cloze_duplicate',\n  RAISE: 'tiny_cloze_up',\n  SUBMIT: 'tiny_cloze_submit',\n  SUMMARY: 'tiny_cloze_summary',\n  TOLERANCE: 'tiny_cloze_tolerance',\n  TYPE: 'tiny_cloze_qtype'\n};\nconst TEMPLATE = {\n    FORM: '<div class=\"tiny_cloze\">' +\n      '<p>{{name}} ({{qtype}})</p>' +\n      '<form name=\"tiny_cloze_form\">' +\n      '<div class=\"row ml-0\">' +\n      '<div class=\"form-group\">' +\n      '<label for=\"{{elementid}}_mark\">{{STR.defaultmark}}</label>' +\n      '<input id=\"{{elementid}}_mark\" type=\"text\" value=\"{{marks}}\" ' +\n      'class=\"{{CSS.MARKS}} form-control d-inline mx-1\" />' +\n      '<a class=\"{{CSS.ADD}}\" title=\"{{STR.addmoreanswerblanks}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/add', 'core') + '\"></a>' +\n      '</div>' +\n      '</div>' +\n      '<div class=\"{{CSS.ANSWERS}} mb-3\">' +\n      '<ol class=\"pl-3\">{{#answerdata}}' +\n      '<li class=\"mt-3\"><div class=\"row ml-0\">' +\n      '<div class=\"{{CSS.LEFT}} form-group\">' +\n      '<label for=\"{{id}}_answer\">{{STR.answer}}</label>' +\n      '<input id=\"{{id}}_answer\" type=\"text\" value=\"{{answer}}\" ' +\n      'class=\"{{CSS.ANSWER}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '<div class=\"{{CSS.LEFT}} form-group\">' +\n      '<a class=\"{{CSS.ADD}}\" title=\"{{STR.addmoreanswerblanks}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/add', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.DELETE}}\" title=\"{{STR.delete}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/delete', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.RAISE}}\" title=\"{{STR.up}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/up', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.LOWER}}\" title=\"{{STR.down}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/down', 'core') + '\"></a>' +\n      '</div>' +\n      '</div>' +\n      '{{#numerical}}' +\n      '<div class=\"row\">' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label for=\"{{id}}_tolerance\">{{{STR.tolerance}}}</label>' +\n      '<input id=\"{{id}}_tolerance\" type=\"text\" value=\"{{tolerance}}\" ' +\n      'class=\"{{CSS.TOLERANCE}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '</div>' +\n      '{{/numerical}}' +\n      '<div class=\"row\">' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label for=\"{{id}}_feedback\">{{STR.feedback}}</label>' +\n      '<input id=\"{{id}}_feedback\" type=\"text\" value=\"{{feedback}}\" ' +\n      'class=\"{{CSS.FEEDBACK}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label id=\"{{id}}_grade\">{{STR.grade}}</label>' +\n      '<select id=\"{{id}}_grade\" class=\"{{CSS.FRACTION}} custom-select mx-2\">' +\n      '{{{fractionOptions}}}' +\n      '</select>' +\n      '</div>' +\n      '</div></li>' +\n      '{{/answerdata}}</ol></div>' +\n      '</form>' +\n      '</div>',\n    TYPE: '<div class=\"tiny_cloze mt-0 mx-2 mb-2\">' +\n      '<p>{{STR.chooseqtypetoadd}}</p>' +\n      '<form name=\"tiny_cloze_form\">' +\n      '<div class=\"{{CSS.TYPE}} form-check\">' +\n      '{{#types}}' +\n      '<div class=\"option\">' +\n      '<input name=\"qtype\" id=\"qtype_qtype_{{type}}\" value=\"{{type}}\" type=\"radio\" class=\"form-check-input\">' +\n      '<label for=\"qtype_qtype_{{type}}\">' +\n      '<span class=\"typename\">{{type}}</span>' +\n      '<span class=\"{{CSS.SUMMARY}}\"><h6>{{name}}</h6><p>{{summary}}</p>' +\n      '<ul>{{#options}}' +\n      '<li>{{.}}</li>' +\n      '{{/options}}</ul>' +\n      '</span>' +\n      '</label></div>' +\n      '{{/types}}</div>' +\n      '</form></div>',\n    FOOTER: '<button type=\"button\" class=\"btn btn-secondary\" data-action=\"cancel\">{{cancel}}</button>' +\n      '<button type=\"button\" class=\"btn btn-primary\" data-action=\"save\">{{submit}}</button>',\n  };\n  const FRACTIONS = [\n    {value: 100},\n    {value: 50},\n    {value: 33.33333},\n    {value: 25},\n    {value: 20},\n    {value: 16.66667},\n    {value: 14.28571},\n    {value: 12.5},\n    {value: 11.11111},\n    {value: 10},\n    {value: 5},\n    {value: 0},\n    {value: -5},\n    {value: -10},\n    {value: -11.11111},\n    {value: -12.5},\n    {value: -14.28571},\n    {value: -16.66667},\n    {value: -20},\n    {value: -25},\n    {value: -33.333},\n    {value: -50},\n    {value: -100},\n  ];\n\n// Language strings used in the modal dialogue.\nlet STR = {};\nconst getStr = async() => {\n  const res = await Promise.all([\n    getString('answer', 'question'),\n    getString('chooseqtypetoadd', 'question'),\n    getString('defaultmark', 'question'),\n    getString('feedback', 'question'),\n    getString('correct', 'question'),\n    getString('incorrect', 'question'),\n    getString('addmoreanswerblanks', 'qtype_calculated'),\n    getString('delete', 'core'),\n    getString('up', 'core'),\n    getString('down', 'core'),\n    getString('tolerance', 'qtype_calculated'),\n    getString('grade', 'grades'),\n    getString('caseno', 'mod_quiz'),\n    getString('caseyes', 'mod_quiz'),\n    getString('answersingleno', 'qtype_multichoice'),\n    getString('answersingleyes', 'qtype_multichoice'),\n    getString('layoutselectinline', 'qtype_multianswer'),\n    getString('layouthorizontal', 'qtype_multianswer'),\n    getString('layoutvertical', 'qtype_multianswer'),\n    getString('shufflewithin', 'mod_quiz'),\n    getString('layoutmultiple_horizontal', 'qtype_multianswer'),\n    getString('layoutmultiple_vertical', 'qtype_multianswer'),\n    getString('pluginnamesummary', 'qtype_multichoice'),\n    getString('pluginnamesummary', 'qtype_shortanswer'),\n    getString('pluginnamesummary', 'qtype_numerical'),\n    getString('multichoice', component),\n    getString('multiresponse', component),\n    getString('numerical', 'mod_quiz'),\n    getString('shortanswer', 'mod_quiz'),\n    getString('cancel', 'core'),\n    getString('select', component),\n    getString('insert', component),\n    getString('pluginname', component),\n  ]);\n  [\n    'answer',\n    'chooseqtypetoadd',\n    'defaultmark',\n    'feedback',\n    'correct',\n    'incorrect',\n    'addmoreanswerblanks',\n    'delete',\n    'up',\n    'down',\n    'tolerance',\n    'grade',\n    'caseno',\n    'caseyes',\n    'singleno',\n    'singleyes',\n    'selectinline',\n    'horizontal',\n    'vertical',\n    'shuffle',\n    'multi_horizontal',\n    'multi_vertical',\n    'summary_multichoice',\n    'summary_shortanswer',\n    'summary_numerical',\n    'multichoice',\n    'multiresponse',\n    'numerical',\n    'shortanswer',\n    'btn_cancel',\n    'btn_select',\n    'btn_insert',\n    'title',\n  ].map((l, i) => {\n    STR[l] = res[i];\n    return ''; // Make the linter happy.\n  });\n};\nconst getQuestionTypes = function() {\n  return [\n    {\n      'type': 'MULTICHOICE',\n      'abbr': ['MC'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.selectinline, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_H',\n      'abbr': ['MCH'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.horizontal, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_V',\n      'abbr': ['MCV'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.vertical, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_S',\n      'abbr': ['MCS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.selectinline, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_HS',\n      'abbr': ['MCHS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.horizontal, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_VS',\n      'abbr': ['MCVS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.vertical, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTIRESPONSE',\n      'abbr': ['MR'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_vertical, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_H',\n      'abbr': ['MRH'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_horizontal, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_S',\n      'abbr': ['MRS'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_vertical, STR.shuffle, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_HS',\n      'abbr': ['MRHS'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_horizontal, STR.shuffle, STR.singleno],\n    },\n    {\n      'type': 'NUMERICAL',\n      'abbr': ['NM'],\n      'name': STR.numerical,\n      'summary': STR.summary_numerical,\n    },\n    {\n      'type': 'SHORTANSWER',\n      'abbr': ['SA', 'MW'],\n      'name': STR.shortanswer,\n      'summary': STR.summary_shortanswer,\n      'options': [STR.caseno],\n    },\n    {\n      'type': 'SHORTANSWER_C',\n      'abbr': ['SAC', 'MWC'],\n      'name': STR.shortanswer,\n      'summary': STR.summary_shortanswer,\n      'options': [STR.caseyes],\n    },\n  ];\n};\n\n/**\n * The editor instance that is injected via the onInit() function.\n *\n * @type tinymce.Editor\n * @private\n */\nlet _editor = null;\n\n/**\n * A reference to the currently open form.\n *\n * @param _form\n * @type Node\n * @private\n */\nlet _form = null;\n\n/**\n * An array containing the current answers options\n *\n * @param _answerdata\n * @type Array\n * @private\n */\nlet _answerdata = [];\n\n/**\n * The sub question type to be edited\n *\n * @param _qtype\n * @type String\n * @private\n */\nlet _qtype = null;\n\n/**\n * Remember the pos of the selected node.\n * @type {number}\n * @private\n */\nlet _selectedOffset = -1;\n\n/**\n * The maximum marks for the sub question\n *\n * @param _marks\n * @type Integer\n * @private\n */\nlet _marks = 1;\n\n/**\n * The modal dialogue to be displayed when designing the cloze question types.\n * @type Modal|null\n */\nlet _modal = null;\n\n/**\n * Inject the editor instance and add markers to the cloze question texts.\n * @param {tinymce.Editor} ed\n */\nconst onInit = function(ed) {\n  _editor = ed; // The current editor instance.\n  // Add the marker spans.\n  _addMarkers();\n  // And get the language strings.\n  getStr();\n};\n\n/**\n * Create the modal.\n * @return {Promise<void>}\n * @private\n */\nconst _createModal = async function() {\n  // Create the modal dialogue. Depending on whether we have a selected node or not, the content is different.\n  const cfg = {\n    title: STR.title,\n    templateContext: {\n      elementid: _editor.id\n    },\n    removeOnClose: true,\n    large: true,\n  };\n  if (typeof Modal.create === 'function') {\n    _modal = await Modal.create(cfg);\n  } else {\n    _modal = await ModalFactory.create(cfg);\n  }\n};\n\n/**\n * Display modal dialogue to edit a cloze question. Either a form is displayed to edit subquestion or a list\n * of possible questions is show.\n *\n * @method displayDialogue\n * @private\n */\nconst displayDialogue = async function() {\n  await _createModal();\n\n  // Resolve whether cursor is in a subquestion.\n  var subquestion = resolveSubquestion();\n  if (subquestion) {\n    // Subquestion found, remember which node of the marker nodes is selected.\n    _selectedOffset = indexOfNode(_editor.dom.select('.' + markerClass), subquestion);\n    _parseSubquestion(subquestion.innerHTML);\n    _setDialogueContent(_qtype);\n  } else {\n    // No subquestion found, no offset to remember.\n    _selectedOffset = -1;\n    _setDialogueContent();\n  }\n};\n\n/**\n * Search for cloze questions based on a regular expression. All the matching snippets at least contain the cloze\n * question definition. Although Moodle does not support encapsulated other functions within curly brackets, we\n * still try to find the correct closing bracket. The so extracted cloze question is surrounded by a marker span\n * element, that contains attributes so that the content inside the span cannot be modified by the editor (in the\n * textarea). Also, this makes it a lot easier to select the question, edit it in the dialogue and replace the result\n * in the existing text area.\n */\nconst _addMarkers = function() {\n\n  let content = _editor.getContent();\n  let newContent = '';\n\n  // Check if there is already a marker span. In this case we do not have to do anything.\n  if (content.indexOf(markerClass) !== -1) {\n    return;\n  }\n\n  let m;\n  do {\n    m = content.match(reQtype);\n    if (!m) { // No match of a cloze question, then we are done.\n      newContent += content;\n      break;\n    }\n    // Copy the current match to the new string preceded with the <span>.\n    const pos = content.indexOf(m[0]);\n    newContent += content.substring(0, pos) + markerSpan + content.substring(pos, pos + m[0].length);\n    content = content.substring(pos + m[0].length);\n\n    // Count the { in the string, should be just one (the very first one at position 0).\n    let level = (m[0].match(/\\{/g) || []).length;\n    if (level === 1) {\n      // If that's the case, we close the span and the cloze question text is the innerHTML of that marker span.\n      newContent += '</span>';\n      continue; // Look for the next matching cloze question.\n    }\n    // If there are more { than } in the string, then we did not find the corresponding } that belongs to the cloze string.\n    while (level > 1) {\n      const a = content.indexOf('{');\n      const b = content.indexOf('}');\n      if (a > -1 && b > -1 && a < b) { // The { is before another } so remember to find as many } until we back at level 1.\n        level++;\n        newContent = content.substring(0, a);\n        content = content.substring(a + 1);\n      } else if (b > -1) { // We found a closing } to a previously {.\n        newContent = content.substring(0, b);\n        content = content.substring(b + 1);\n        level--;\n      } else {\n        level = 1; // Should not happen, just to stop the endless loop.\n      }\n    }\n    newContent += '</span>';\n  } while (m);\n  _editor.setContent(newContent);\n};\n\n/**\n * Look for the marker span elements around a cloze question and remove that span. Also, the marker for a new\n * node to be inserted would be removed here as well.\n */\nconst _removeMarkers = function() {\n  for (const span of _editor.dom.select('span.' + markerClass)) {\n    _editor.dom.setOuterHTML(span, span.classList.contains('new') ? '' : span.innerHTML);\n  }\n};\n\n/**\n * When the source code view dialogue is show, we must remove the spans around the cloze question strings\n * from the editor content and add them again when the dialogue is closed.\n * Since this event is also triggered when the editor data is saved, we use this function to remove the\n * highlighting content at that time.\n * @param {object} content\n */\nconst onBeforeGetContent = function(content) {\n  if (!isNull(content.source_view) && content.source_view === true) {\n    // If the user clicks on 'Cancel' or the close button on the html\n    // source code dialog view, make sure we re-add the visual styling.\n    var onClose = function() {\n      _editor.off('close', onClose);\n      _addMarkers();\n    };\n    _editor.on('CloseWindow', () => {\n      onClose();\n    });\n    // Remove markers only if modal is not called, otherwise we will lose our new question marker.\n    if (!_modal) {\n      _removeMarkers();\n    }\n  }\n};\n\n/**\n * Fires when the form containing the editor is submitted.\n */\nconst onSubmit = function() {\n  _removeMarkers();\n};\n\n/**\n * Set the dialogue content for the tool, attaching any required events. Either the modal dialogue displays\n * a list of the question types for the form for a particular question to edit. The set content is also\n * called when the form has changed (up or down move, deletion and adding a response). We must be aware of that\n * an event to the dialogue buttons must attached once only. Therefore when the form content is modified, only\n * the form events for the answers are set again, the general events are nor (nomodalevents is true then).\n *\n * @method _setDialogueContent\n * @param {String} qtype The question type to be used\n * @param {boolean} nomodalevents Optional do not attach events.\n * @private\n */\nconst _setDialogueContent = function(qtype, nomodalevents) {\n  const footer = Mustache.render(TEMPLATE.FOOTER, {\n    cancel: STR.btn_cancel,\n    submit: !qtype ? STR.btn_select : STR.btn_insert,\n  });\n  let contentText;\n  if (!qtype) {\n    contentText = Mustache.render(TEMPLATE.TYPE, {\n      CSS: CSS,\n      STR: STR,\n      qtype: _qtype,\n      types: getQuestionTypes()\n    });\n  } else {\n    contentText = Mustache.render(TEMPLATE.FORM, {\n      CSS: CSS,\n      STR: STR,\n      answerdata: _answerdata,\n      elementid: getUuid(),\n      qtype: _qtype,\n      name: getQuestionTypes().filter(q => _qtype === q.type)[0].name,\n      marks: _marks,\n      numerical: (_qtype === 'NUMERICAL' || _qtype === 'NM')\n    });\n  }\n  _modal.setBody(contentText);\n  _modal.setFooter(footer);\n  _modal.show();\n  const $root = _modal.getRoot();\n  _form = $root.get(0).querySelector('form');\n\n  if (!nomodalevents) {\n    _modal.registerEventListeners();\n    _modal.registerCloseOnSave();\n    _modal.registerCloseOnCancel();\n    $root.on(ModalEvents.cancel, _cancel);\n\n    if (!qtype) { // For the question list we need the choice handler only, and we are done.\n      $root.on(ModalEvents.save, _choiceHandler);\n      return;\n    } // Handler to add the question string to the editor content.\n    $root.on(ModalEvents.save, _setSubquestion);\n  }\n  // The form needs events for the icons to move up/down, add or delete a response.\n  const getTarget = e => {\n    let p = e.target;\n    while (!isNull(p) && p.nodeType === 1 && p.tagName !== 'A') {\n      p = p.parentNode;\n    }\n    if (isNull(p.classList)) {\n      return null;\n    }\n    return p;\n  };\n\n  _form.addEventListener('click', e => {\n    const p = getTarget(e);\n    if (isNull(p)) {\n      return;\n    }\n    if (p.classList.contains(CSS.DELETE)) {\n      e.preventDefault();\n      _deleteAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.ADD)) {\n      e.preventDefault();\n      _addAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.LOWER)) {\n      e.preventDefault();\n      _lowerAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.RAISE)) {\n      e.preventDefault();\n      _raiseAnswer(p);\n    }\n  });\n  _form.addEventListener('keyup', e => {\n    const p = getTarget(e);\n    if (isNull(p)) {\n      return;\n    }\n    if (p.classList.contains(CSS.ANSWER) || p.classList.contains(CSS.FEEDBACK)) {\n      e.preventDefault();\n      _addAnswer(p);\n    }\n  });\n};\n\n/**\n * Handle question choice.\n *\n * @method _choiceHandler\n * @private\n * @param {Event} e Event from button click in chooser\n */\nconst _choiceHandler = function(e) {\n  e.preventDefault();\n  let qtype = _form.querySelector('input[name=qtype]:checked');\n  if (qtype) {\n    _qtype = qtype.value;\n  }\n  const one = _qtype.indexOf('SHORTANSWER') !== -1 || _qtype === 'NUMERICAL';\n  const blankAnswer = {\n    id: getUuid(),\n    answer: '',\n    feedback: '',\n    fraction: 100,\n    fractionOptions: getFractionOptions(one ? '=' : ''),\n    tolerance: 0\n  };\n  _answerdata = one ? [blankAnswer] : [blankAnswer, blankAnswer, blankAnswer];\n  _modal.destroy();\n  // Our choice is stored in _qtype. We need to create the modal dialogue with the form now.\n  _createModal().then(() => {\n    _setDialogueContent(_qtype);\n    _form.querySelector('.' + CSS.ANSWER).focus();\n    return ''; // Make the linter happy.\n  }).catch(() => {\n      return '';\n  });\n};\n\n/**\n * Parse question and set properties found.\n *\n * @method _parseSubquestion\n * @private\n * @param {String} question The question string\n */\nconst _parseSubquestion = function(question) {\n  _answerdata = []; // Flush answers to have an empty dialogue if something goes wrong parsing the question string.\n  const parts = reQtype.exec(question);\n  reQtype.lastIndex = 0; // Reset lastIndex so that the next match starts from the beginning of the question string.\n  if (!parts) {\n    return;\n  }\n  _marks = parts[1];\n  _qtype = parts[2];\n  // Convert the short notation to the long form e.g. SA to SHORTANSWER.\n  if (_qtype.length < 5) {\n    getQuestionTypes().forEach(l => {\n      for (const a of l.abbr) {\n        if (a === _qtype) {\n          _qtype = l.type;\n          return;\n        }\n      }\n    });\n  }\n  const answers = parts[7].match(/(\\\\.|[^~])*/g);\n  if (!answers) {\n    return;\n  }\n  answers.forEach(function(answer) {\n    const options = /^(%(-?[.0-9]+)%|(=?))((\\\\.|[^#])*)#?(.*)/.exec(answer);\n    if (options && options[4]) {\n      let frac = 0;\n      if (options[3]) {\n        frac = options[3] === '=' ? '=' : 100;\n      } else if (options[2]) {\n        frac = options[2];\n      }\n      if (_qtype === 'NUMERICAL' || _qtype === 'NM') {\n        const tolerance = /^([^:]*):?(.*)/.exec(options[4])[2] || 0;\n        _answerdata.push({\n          id: getUuid(),\n          answer: strdecode(options[4].replace(/:.*/, '')),\n          feedback: strdecode(options[6]),\n          tolerance: tolerance,\n          fraction: frac,\n          fractionOptions: getFractionOptions(frac),\n        });\n        return;\n      }\n      _answerdata.push({\n        answer: strdecode(options[4]),\n        id: getUuid(),\n        feedback: strdecode(options[6]),\n        fraction: frac,\n        fractionOptions: getFractionOptions(frac),\n      });\n    }\n  });\n};\n\n/**\n * Insert a new set of answer blanks below the button.\n *\n * @method _addAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _addAnswer = function(a) {\n  let index = indexOfNode(_form.querySelectorAll('.' + CSS.ADD), a);\n  if (index === -1) {\n    index = indexOfNode(_form.querySelectorAll('.' + CSS.ANSWER + ', .' + CSS.FEEDBACK), a);\n    if (index !== -1) {\n      index = Math.floor(index / 2) + 1;\n    }\n  }\n  let fraction = '';\n  if (a.closest('li')) {\n    fraction = a.closest('li').querySelector('.' + CSS.FRACTION).value;\n    index = indexOfNode(_form.querySelectorAll('li'), a.closest('li')) + 1;\n  }\n  let tolerance = 0;\n  if (a.closest('li') && a.closest('li').querySelector('.' + CSS.TOLERANCE)) {\n    tolerance = a.closest('li').querySelector('.' + CSS.TOLERANCE).value;\n  }\n  _getFormData();\n  _answerdata.splice(index, 0, {\n    id: getUuid(),\n    answer: '',\n    feedback: '',\n    fraction: fraction,\n    fractionOptions: getFractionOptions(fraction),\n    tolerance: tolerance\n  });\n  _setDialogueContent(_qtype, true);\n  _form.querySelectorAll('.' + CSS.ANSWER).item(index).focus();\n};\n\n/**\n * Delete set of answer next to the button.\n *\n * @method _deleteAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _deleteAnswer = function(a) {\n  let index = indexOfNode(_form.querySelectorAll('.' + CSS.DELETE), a);\n  if (index === -1) {\n    index = indexOfNode(_form.querySelectorAll('li'), a.closest('li'));\n  }\n  _getFormData();\n  _answerdata.splice(index, 1);\n  _setDialogueContent(_qtype, true);\n  const answers = _form.querySelectorAll('.' + CSS.ANSWER);\n  index = Math.min(index, answers.length - 1);\n  answers.item(index).focus();\n};\n\n/**\n * Lower answer option\n *\n * @method _lowerAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _lowerAnswer = function(a) {\n  const li = a.closest('li');\n  li.before(li.nextSibling);\n  li.querySelector('.' + CSS.ANSWER).focus();\n};\n\n/**\n * Raise answer option\n *\n * @method _raiseAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _raiseAnswer = function(a) {\n  const li = a.closest('li');\n  li.after(li.previousSibling);\n  li.querySelector('.' + CSS.ANSWER).focus();\n};\n\n/**\n * Reset and hide form.\n *\n * @method _cancel\n * @param {Event} e Event from button click\n * @private\n */\nconst _cancel = function(e) {\n  e.preventDefault();\n  // In case there is a marker where the new question should be inserted in the text it needs to be removed.\n  for (const span of _editor.dom.select('.' + markerClass + '.new')) {\n    span.remove();\n  }\n  _modal.destroy();\n  _editor.focus();\n  _modal = null;\n};\n\n/**\n * Insert question string into editor content and reset and hide form.\n *\n * @method _setSubquestion\n * @param {Event} e Event from button click\n * @private\n */\nconst _setSubquestion = function(e) {\n  e.preventDefault();\n  _getFormData();\n\n  // Build the parser function from the data, that is going to be placed into the editor content.\n  let question = '{' + _marks + ':' + _qtype + ':';\n\n  for (let i = 0; i < _answerdata.length; i++) {\n    question += _answerdata[i].fraction && !isNaN(_answerdata[i].fraction)\n      ? '%' + _answerdata[i].fraction + '%' : _answerdata[i].fraction;\n    question += strencode(_answerdata[i].answer);\n    if (_answerdata[i].tolerance) {\n      question += ':' + _answerdata[i].tolerance;\n    }\n    if (_answerdata[i].feedback) {\n      question += '#' + strencode(_answerdata[i].feedback);\n    }\n    if (i < _answerdata.length - 1) {\n      question += '~';\n    }\n  }\n  question += '}';\n\n  _modal.destroy();\n  _modal = null;\n  _editor.focus();\n  if (_selectedOffset > -1) { // We have to replace one of the marker spans (the innerHTML contains the question string).\n    _editor.dom.select('.' + markerClass)[_selectedOffset].innerHTML = question;\n  } else {\n    // Just add the question text with markup.\n    _editor.insertContent(markerSpan + question + '</span>');\n  }\n};\n\n/**\n * Read the form data, process it and store the result in the internal  _answerdata array.\n *\n * @method _getFormData\n * @private\n */\nconst _getFormData = function() {\n  _answerdata = [];\n  let answer;\n  const answers = _form.querySelectorAll('.' + CSS.ANSWER);\n  const feedbacks = _form.querySelectorAll('.' + CSS.FEEDBACK);\n  const fractions = _form.querySelectorAll('.' + CSS.FRACTION);\n  const tolerances = _form.querySelectorAll('.' + CSS.TOLERANCE);\n  for (let i = 0; i < answers.length; i++) {\n    answer = answers.item(i).value;\n    if (_qtype === 'NM' || _qtype === 'NUMERICAL') {\n      answer = Number(answer);\n    }\n    _answerdata.push({\n      answer: answer,\n      id: getUuid(),\n      feedback: feedbacks.item(i).value,\n      fraction: fractions.item(i).value,\n      fractionOptions: getFractionOptions(fractions.item(i).value),\n      tolerance: !isNull(tolerances.item(i)) ? tolerances.item(i).value : 0\n    });\n    _marks = _form.querySelector('.' + CSS.MARKS).value;\n  }\n};\n\n/**\n * Check whether cursor is in a subquestion and return subquestion text if\n * true.\n *\n * @method resolveSubquestion\n * @return {Mixed} The selected node of with the subquestion if found, false otherwise.\n */\nconst resolveSubquestion = function() {\n  let span = _editor.selection.getStart();\n  if (!isNull(span.classList) && span.classList.contains(markerClass)) {\n    return span;\n  }\n  _editor.dom.getParents(span, elm => {\n    // Are we in a span that encapsulates the cloze question?\n    if (!isNull(elm.classList) && elm.classList.contains(markerClass)) {\n      return elm;\n    }\n    return false;\n  });\n  return false;\n};\n\nexport {\n  displayDialogue,\n  resolveSubquestion,\n  onInit,\n  onBeforeGetContent,\n  onSubmit,\n};\n"],"names":["isNull","a","strdecode","t","String","replace","strencode","indexOfNode","list","node","i","length","getUuid","crypto","randomUUID","Math","floor","random","toString","getFractionOptions","s","html","STR","incorrect","correct","FRACTIONS","forEach","item","value","markerClass","markerSpan","reQtype","CSS","ANSWER","ANSWERS","ADD","CANCEL","DELETE","FEEDBACK","FRACTION","LEFT","LOWER","RIGHT","MARKS","DUPLICATE","RAISE","SUBMIT","SUMMARY","TOLERANCE","TYPE","TEMPLATE","FORM","M","util","image_url","FOOTER","getQuestionTypes","multichoice","summary_multichoice","selectinline","singleyes","horizontal","vertical","shuffle","multiresponse","multi_vertical","singleno","multi_horizontal","numerical","summary_numerical","shortanswer","summary_shortanswer","caseno","caseyes","_editor","_form","_answerdata","_qtype","_selectedOffset","_marks","_modal","ed","_addMarkers","async","res","Promise","all","component","map","l","getStr","_createModal","cfg","title","templateContext","elementid","id","removeOnClose","large","Modal","create","ModalFactory","subquestion","resolveSubquestion","dom","select","_parseSubquestion","innerHTML","_setDialogueContent","m","content","getContent","newContent","indexOf","match","pos","substring","level","b","setContent","_removeMarkers","span","setOuterHTML","classList","contains","source_view","onClose","off","on","qtype","nomodalevents","footer","Mustache","render","cancel","btn_cancel","submit","btn_insert","btn_select","contentText","answerdata","name","filter","q","type","marks","types","setBody","setFooter","show","$root","getRoot","get","querySelector","registerEventListeners","registerCloseOnSave","registerCloseOnCancel","ModalEvents","_cancel","save","_choiceHandler","_setSubquestion","getTarget","e","p","target","nodeType","tagName","parentNode","addEventListener","preventDefault","_deleteAnswer","_addAnswer","_lowerAnswer","_raiseAnswer","one","blankAnswer","answer","feedback","fraction","fractionOptions","tolerance","destroy","then","focus","catch","question","parts","exec","lastIndex","abbr","answers","options","frac","push","index","querySelectorAll","closest","_getFormData","splice","min","li","before","nextSibling","after","previousSibling","remove","isNaN","insertContent","feedbacks","fractions","tolerances","Number","selection","getStart","getParents","elm"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"ui.min.js","sources":["../src/ui.js"],"sourcesContent":["// This file is part of Moodle - https://moodle.org/\n//\n// Moodle is free software: you can redistribute it and/or modify\n// it under the terms of the GNU General Public License as published by\n// the Free Software Foundation, either version 3 of the License, or\n// (at your option) any later version.\n//\n// Moodle is distributed in the hope that it will be useful,\n// but WITHOUT ANY WARRANTY; without even the implied warranty of\n// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n// GNU General Public License for more details.\n//\n// You should have received a copy of the GNU General Public License\n// along with Moodle.  If not, see <https://www.gnu.org/licenses/>.\n\n/**\n * Plugin tiny_cloze for TinyMCE v6 in Moodle.\n *\n * @module      tiny_cloze/ui\n * @copyright   2023 MoodleDACH\n * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later\n */\n\nimport ModalEvents from 'core/modal_events';\nimport Modal from 'core/modal';\nimport ModalFactory from 'core/modal_factory';\nimport Mustache from 'core/mustache';\nimport {get_string as getString} from 'core/str';\nimport {component} from './common';\n\n// Helper functions.\nconst isNull = a => a === null || a === undefined;\nconst strdecode = t => String(t).replace(/\\\\(#|\\}|~)/g, '$1');\nconst strencode = t => String(t).replace(/(#|\\}|~)/g, '\\\\$1');\nconst indexOfNode = (list, node) => {\n  for (let i = 0; i < list.length; i++) {\n    if (list[i] === node) {\n      return i;\n    }\n  }\n  return -1;\n};\nconst getUuid = function() {\n  if (!isNull(crypto.randomUUID)) {\n    return crypto.randomUUID();\n  }\n  return 'ed-cloze-' + Math.floor(Math.random() * 100000).toString();\n};\n// Grade Selector value when custom percentage is selected.\nconst selectCustomPercent = '__custom__';\n// This is a specific helper function to return the options html for the fraction select element.\nconst getFractionOptions = s => {\n  const attrSel =  ' selected=\"selected\"';\n  let isSel = s === '=' ? attrSel : '';\n  let html = `<option value=\"\">${STR.incorrect}</option><option value=\"=\"${isSel}>${STR.correct}</option>`;\n  FRACTIONS.forEach(item => {\n    isSel = item.value.toString() === s ? attrSel : '';\n    html += `<option value=\"${item.value}\"${isSel}>${item.value}%</option>`;\n  });\n  isSel = s !== '' && html.indexOf(attrSel) === -1 ? attrSel : '';\n  html += `<option value=\"${selectCustomPercent}\"${isSel}>${STR.custom_grade}</option>`;\n  return html;\n};\n// Check if the value is a custom grade value (in order to show the input field).\nconst isCustomGrade = s => {\n  if (s === '=' || s === '') {\n    return false;\n  }\n  let found = false;\n  FRACTIONS.forEach(item => {\n    if (item.value.toString() === s) {\n      found = true;\n    }\n  });\n  return !found;\n};\n// Marker class and the whole span element that is used to encapsulate the cloze question text.\nconst markerClass = 'cloze-question-marker';\nconst markerSpan = '<span contenteditable=\"false\" class=\"' + markerClass + '\" data-mce-contenteditable=\"false\">';\n// Regex to recognize the question string in the text e.g. {1:NUMERICAL:...} or {:MULTICHOICE:...}\n// eslint-disable-next-line max-len\nconst reQtype = /\\{([0-9]*):(MULTICHOICE(_H|_V|_S|_HS|_VS)?|MULTIRESPONSE(_H|_S|_HS)?|NUMERICAL|SHORTANSWER(_C)?|SAC?|NM|MWC?|M[CR](V|H|VS|HS)?):(.*?)\\}/g;\n\n// CSS classes that are used in the modal dialogue.\nconst CSS = {\n  ANSWER: 'tiny_cloze_answer',\n  ANSWERS: 'tiny_cloze_answers',\n  ADD: 'tiny_cloze_add',\n  CANCEL: 'tiny_cloze_cancel',\n  DELETE: 'tiny_cloze_delete',\n  FEEDBACK: 'tiny_cloze_feedback',\n  FRACTION: 'tiny_cloze_fraction',\n  FRAC_CUSTOM: 'tiny_cloze_frac_custom',\n  LEFT: 'tiny_cloze_col0',\n  LOWER: 'tiny_cloze_down',\n  RIGHT: 'tiny_cloze_col1',\n  MARKS: 'tiny_cloze_marks',\n  DUPLICATE: 'tiny_cloze_duplicate',\n  RAISE: 'tiny_cloze_up',\n  SUBMIT: 'tiny_cloze_submit',\n  SUMMARY: 'tiny_cloze_summary',\n  TOLERANCE: 'tiny_cloze_tolerance',\n  TYPE: 'tiny_cloze_qtype'\n};\nconst TEMPLATE = {\n    FORM: '<div class=\"tiny_cloze\">' +\n      '<p>{{name}} ({{qtype}})</p>' +\n      '<form name=\"tiny_cloze_form\">' +\n      '<div class=\"row ml-0\">' +\n      '<div class=\"form-group\">' +\n      '<label for=\"{{elementid}}_mark\">{{STR.defaultmark}}</label>' +\n      '<input id=\"{{elementid}}_mark\" type=\"text\" value=\"{{marks}}\" ' +\n      'class=\"{{CSS.MARKS}} form-control d-inline mx-1\" />' +\n      '<a class=\"{{CSS.ADD}}\" title=\"{{STR.addmoreanswerblanks}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/add', 'core') + '\"></a>' +\n      '</div>' +\n      '</div>' +\n      '<div class=\"{{CSS.ANSWERS}} mb-3\">' +\n      '<ol class=\"pl-3\">{{#answerdata}}' +\n      '<li class=\"mt-3\"><div class=\"row ml-0\">' +\n      '<div class=\"{{CSS.LEFT}} form-group\">' +\n      '<label for=\"{{id}}_answer\">{{STR.answer}}</label>' +\n      '<input id=\"{{id}}_answer\" type=\"text\" value=\"{{answer}}\" ' +\n      'class=\"{{CSS.ANSWER}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '<div class=\"{{CSS.LEFT}} form-group\">' +\n      '<a class=\"{{CSS.ADD}}\" title=\"{{STR.addmoreanswerblanks}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/add', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.DELETE}}\" title=\"{{STR.delete}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/delete', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.RAISE}}\" title=\"{{STR.up}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/up', 'core') + '\"></a>' +\n      '<a class=\"{{CSS.LOWER}}\" title=\"{{STR.down}}\">' +\n      '<img class=\"icon_smallicon\" src=\"' +\n      M.util.image_url('t/down', 'core') + '\"></a>' +\n      '</div>' +\n      '</div>' +\n      '{{#numerical}}' +\n      '<div class=\"row\">' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label for=\"{{id}}_tolerance\">{{{STR.tolerance}}}</label>' +\n      '<input id=\"{{id}}_tolerance\" type=\"text\" value=\"{{tolerance}}\" ' +\n      'class=\"{{CSS.TOLERANCE}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '</div>' +\n      '{{/numerical}}' +\n      '<div class=\"row\">' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label for=\"{{id}}_feedback\">{{STR.feedback}}</label>' +\n      '<input id=\"{{id}}_feedback\" type=\"text\" value=\"{{feedback}}\" ' +\n      'class=\"{{CSS.FEEDBACK}} form-control d-inline mx-2\" />' +\n      '</div>' +\n      '<div class=\"{{CSS.RIGHT}} form-group\">' +\n      '<label id=\"{{id}}_grade\">{{STR.grade}}</label>' +\n      '<select id=\"{{id}}_grade\" class=\"{{CSS.FRACTION}} custom-select mx-2\">' +\n      '{{{fractionOptions}}}' +\n      '</select>' +\n      '</div>' +\n      '<div class=\"{{CSS.RIGHT}} form-group{{^isCustomGrade}} hidden{{/isCustomGrade}}\">' +\n      '<input id=\"{{id}}_grade_custom\" type=\"text\"{{#isCustomGrade}} value=\"{{fraction}}\"{{/isCustomGrade}} ' +\n      'class=\"{{CSS.FRAC_CUSTOM}} form-control d-inline mx-2\" style=\"width: 4rem;\" />%' +\n      '</div>' +\n      '</div></li>' +\n      '{{/answerdata}}</ol></div>' +\n      '</form>' +\n      '</div>',\n    TYPE: '<div class=\"tiny_cloze mt-0 mx-2 mb-2\">' +\n      '<p>{{STR.chooseqtypetoadd}}</p>' +\n      '<form name=\"tiny_cloze_form\">' +\n      '<div class=\"{{CSS.TYPE}} form-check\">' +\n      '{{#types}}' +\n      '<div class=\"option\">' +\n      '<input name=\"qtype\" id=\"qtype_qtype_{{type}}\" value=\"{{type}}\" type=\"radio\" class=\"form-check-input\">' +\n      '<label for=\"qtype_qtype_{{type}}\">' +\n      '<span class=\"typename\">{{type}}</span>' +\n      '<span class=\"{{CSS.SUMMARY}}\"><h6>{{name}}</h6><p>{{summary}}</p>' +\n      '<ul>{{#options}}' +\n      '<li>{{.}}</li>' +\n      '{{/options}}</ul>' +\n      '</span>' +\n      '</label></div>' +\n      '{{/types}}</div>' +\n      '</form></div>',\n    FOOTER: '<button type=\"button\" class=\"btn btn-secondary\" data-action=\"cancel\">{{cancel}}</button>' +\n      '<button type=\"button\" class=\"btn btn-primary\" data-action=\"save\">{{submit}}</button>',\n  };\n  const FRACTIONS = [\n    {value: 100},\n    {value: 50},\n    {value: 0},\n  ];\n\n// Language strings used in the modal dialogue.\nlet STR = {};\nconst getStr = async() => {\n  const res = await Promise.all([\n    getString('answer', 'question'),\n    getString('chooseqtypetoadd', 'question'),\n    getString('defaultmark', 'question'),\n    getString('feedback', 'question'),\n    getString('correct', 'question'),\n    getString('incorrect', 'question'),\n    getString('addmoreanswerblanks', 'qtype_calculated'),\n    getString('delete', 'core'),\n    getString('up', 'core'),\n    getString('down', 'core'),\n    getString('tolerance', 'qtype_calculated'),\n    getString('grade', 'grades'),\n    getString('caseno', 'mod_quiz'),\n    getString('caseyes', 'mod_quiz'),\n    getString('answersingleno', 'qtype_multichoice'),\n    getString('answersingleyes', 'qtype_multichoice'),\n    getString('layoutselectinline', 'qtype_multianswer'),\n    getString('layouthorizontal', 'qtype_multianswer'),\n    getString('layoutvertical', 'qtype_multianswer'),\n    getString('shufflewithin', 'mod_quiz'),\n    getString('layoutmultiple_horizontal', 'qtype_multianswer'),\n    getString('layoutmultiple_vertical', 'qtype_multianswer'),\n    getString('pluginnamesummary', 'qtype_multichoice'),\n    getString('pluginnamesummary', 'qtype_shortanswer'),\n    getString('pluginnamesummary', 'qtype_numerical'),\n    getString('multichoice', component),\n    getString('multiresponse', component),\n    getString('numerical', 'mod_quiz'),\n    getString('shortanswer', 'mod_quiz'),\n    getString('cancel', 'core'),\n    getString('select', component),\n    getString('insert', component),\n    getString('pluginname', component),\n    getString('customgrade', component),\n  ]);\n  [\n    'answer',\n    'chooseqtypetoadd',\n    'defaultmark',\n    'feedback',\n    'correct',\n    'incorrect',\n    'addmoreanswerblanks',\n    'delete',\n    'up',\n    'down',\n    'tolerance',\n    'grade',\n    'caseno',\n    'caseyes',\n    'singleno',\n    'singleyes',\n    'selectinline',\n    'horizontal',\n    'vertical',\n    'shuffle',\n    'multi_horizontal',\n    'multi_vertical',\n    'summary_multichoice',\n    'summary_shortanswer',\n    'summary_numerical',\n    'multichoice',\n    'multiresponse',\n    'numerical',\n    'shortanswer',\n    'btn_cancel',\n    'btn_select',\n    'btn_insert',\n    'title',\n    'custom_grade',\n  ].map((l, i) => {\n    STR[l] = res[i];\n    return ''; // Make the linter happy.\n  });\n};\nconst getQuestionTypes = function() {\n  return [\n    {\n      'type': 'MULTICHOICE',\n      'abbr': ['MC'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.selectinline, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_H',\n      'abbr': ['MCH'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.horizontal, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_V',\n      'abbr': ['MCV'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.vertical, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_S',\n      'abbr': ['MCS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.selectinline, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_HS',\n      'abbr': ['MCHS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.horizontal, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTICHOICE_VS',\n      'abbr': ['MCVS'],\n      'name': STR.multichoice,\n      'summary': STR.summary_multichoice,\n      'options': [STR.vertical, STR.shuffle, STR.singleyes],\n    },\n    {\n      'type': 'MULTIRESPONSE',\n      'abbr': ['MR'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_vertical, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_H',\n      'abbr': ['MRH'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_horizontal, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_S',\n      'abbr': ['MRS'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_vertical, STR.shuffle, STR.singleno],\n    },\n    {\n      'type': 'MULTIRESPONSE_HS',\n      'abbr': ['MRHS'],\n      'name': STR.multiresponse,\n      'summary': STR.summary_multichoice,\n      'options': [STR.multi_horizontal, STR.shuffle, STR.singleno],\n    },\n    {\n      'type': 'NUMERICAL',\n      'abbr': ['NM'],\n      'name': STR.numerical,\n      'summary': STR.summary_numerical,\n    },\n    {\n      'type': 'SHORTANSWER',\n      'abbr': ['SA', 'MW'],\n      'name': STR.shortanswer,\n      'summary': STR.summary_shortanswer,\n      'options': [STR.caseno],\n    },\n    {\n      'type': 'SHORTANSWER_C',\n      'abbr': ['SAC', 'MWC'],\n      'name': STR.shortanswer,\n      'summary': STR.summary_shortanswer,\n      'options': [STR.caseyes],\n    },\n  ];\n};\n\n/**\n * The editor instance that is injected via the onInit() function.\n *\n * @type tinymce.Editor\n * @private\n */\nlet _editor = null;\n\n/**\n * A reference to the currently open form.\n *\n * @param _form\n * @type Node\n * @private\n */\nlet _form = null;\n\n/**\n * An array containing the current answers options\n *\n * @param _answerdata\n * @type Array\n * @private\n */\nlet _answerdata = [];\n\n/**\n * The sub question type to be edited\n *\n * @param _qtype\n * @type String\n * @private\n */\nlet _qtype = null;\n\n/**\n * Remember the pos of the selected node.\n * @type {number}\n * @private\n */\nlet _selectedOffset = -1;\n\n/**\n * The maximum marks for the sub question\n *\n * @param _marks\n * @type Integer\n * @private\n */\nlet _marks = 1;\n\n/**\n * The modal dialogue to be displayed when designing the cloze question types.\n * @type Modal|null\n */\nlet _modal = null;\n\n/**\n * Inject the editor instance and add markers to the cloze question texts.\n * @param {tinymce.Editor} ed\n */\nconst onInit = function(ed) {\n  _editor = ed; // The current editor instance.\n  // Add the marker spans.\n  _addMarkers();\n  // And get the language strings.\n  getStr();\n};\n\n/**\n * Create the modal.\n * @return {Promise<void>}\n * @private\n */\nconst _createModal = async function() {\n  // Create the modal dialogue. Depending on whether we have a selected node or not, the content is different.\n  const cfg = {\n    title: STR.title,\n    templateContext: {\n      elementid: _editor.id\n    },\n    removeOnClose: true,\n    large: true,\n  };\n  if (typeof Modal.create === 'function') {\n    _modal = await Modal.create(cfg);\n  } else {\n    _modal = await ModalFactory.create(cfg);\n  }\n};\n\n/**\n * Display modal dialogue to edit a cloze question. Either a form is displayed to edit subquestion or a list\n * of possible questions is show.\n *\n * @method displayDialogue\n * @private\n */\nconst displayDialogue = async function() {\n  await _createModal();\n\n  // Resolve whether cursor is in a subquestion.\n  var subquestion = resolveSubquestion();\n  if (subquestion) {\n    // Subquestion found, remember which node of the marker nodes is selected.\n    _selectedOffset = indexOfNode(_editor.dom.select('.' + markerClass), subquestion);\n    _parseSubquestion(subquestion.innerHTML);\n    _setDialogueContent(_qtype);\n  } else {\n    // No subquestion found, no offset to remember.\n    _selectedOffset = -1;\n    _setDialogueContent();\n  }\n};\n\n/**\n * Search for cloze questions based on a regular expression. All the matching snippets at least contain the cloze\n * question definition. Although Moodle does not support encapsulated other functions within curly brackets, we\n * still try to find the correct closing bracket. The so extracted cloze question is surrounded by a marker span\n * element, that contains attributes so that the content inside the span cannot be modified by the editor (in the\n * textarea). Also, this makes it a lot easier to select the question, edit it in the dialogue and replace the result\n * in the existing text area.\n */\nconst _addMarkers = function() {\n\n  let content = _editor.getContent();\n  let newContent = '';\n\n  // Check if there is already a marker span. In this case we do not have to do anything.\n  if (content.indexOf(markerClass) !== -1) {\n    return;\n  }\n\n  let m;\n  do {\n    m = content.match(reQtype);\n    if (!m) { // No match of a cloze question, then we are done.\n      newContent += content;\n      break;\n    }\n    // Copy the current match to the new string preceded with the <span>.\n    const pos = content.indexOf(m[0]);\n    newContent += content.substring(0, pos) + markerSpan + content.substring(pos, pos + m[0].length);\n    content = content.substring(pos + m[0].length);\n\n    // Count the { in the string, should be just one (the very first one at position 0).\n    let level = (m[0].match(/\\{/g) || []).length;\n    if (level === 1) {\n      // If that's the case, we close the span and the cloze question text is the innerHTML of that marker span.\n      newContent += '</span>';\n      continue; // Look for the next matching cloze question.\n    }\n    // If there are more { than } in the string, then we did not find the corresponding } that belongs to the cloze string.\n    while (level > 1) {\n      const a = content.indexOf('{');\n      const b = content.indexOf('}');\n      if (a > -1 && b > -1 && a < b) { // The { is before another } so remember to find as many } until we back at level 1.\n        level++;\n        newContent = content.substring(0, a);\n        content = content.substring(a + 1);\n      } else if (b > -1) { // We found a closing } to a previously {.\n        newContent = content.substring(0, b);\n        content = content.substring(b + 1);\n        level--;\n      } else {\n        level = 1; // Should not happen, just to stop the endless loop.\n      }\n    }\n    newContent += '</span>';\n  } while (m);\n  _editor.setContent(newContent);\n};\n\n/**\n * Look for the marker span elements around a cloze question and remove that span. Also, the marker for a new\n * node to be inserted would be removed here as well.\n */\nconst _removeMarkers = function() {\n  for (const span of _editor.dom.select('span.' + markerClass)) {\n    _editor.dom.setOuterHTML(span, span.classList.contains('new') ? '' : span.innerHTML);\n  }\n};\n\n/**\n * When the source code view dialogue is show, we must remove the spans around the cloze question strings\n * from the editor content and add them again when the dialogue is closed.\n * Since this event is also triggered when the editor data is saved, we use this function to remove the\n * highlighting content at that time.\n * @param {object} content\n */\nconst onBeforeGetContent = function(content) {\n  if (!isNull(content.source_view) && content.source_view === true) {\n    // If the user clicks on 'Cancel' or the close button on the html\n    // source code dialog view, make sure we re-add the visual styling.\n    var onClose = function() {\n      _editor.off('close', onClose);\n      _addMarkers();\n    };\n    _editor.on('CloseWindow', () => {\n      onClose();\n    });\n    // Remove markers only if modal is not called, otherwise we will lose our new question marker.\n    if (!_modal) {\n      _removeMarkers();\n    }\n  }\n};\n\n/**\n * Fires when the form containing the editor is submitted.\n */\nconst onSubmit = function() {\n  _removeMarkers();\n};\n\n/**\n * Set the dialogue content for the tool, attaching any required events. Either the modal dialogue displays\n * a list of the question types for the form for a particular question to edit. The set content is also\n * called when the form has changed (up or down move, deletion and adding a response). We must be aware of that\n * an event to the dialogue buttons must be attached once only. Therefore, when the form content is modified, only\n * the form events for the answers are set again, the general events are nor (nomodalevents is true then).\n *\n * @method _setDialogueContent\n * @param {String} qtype The question type to be used\n * @param {boolean} nomodalevents Optional do not attach events.\n * @private\n */\nconst _setDialogueContent = function(qtype, nomodalevents) {\n  const footer = Mustache.render(TEMPLATE.FOOTER, {\n    cancel: STR.btn_cancel,\n    submit: !qtype ? STR.btn_select : STR.btn_insert,\n  });\n  let contentText;\n  if (!qtype) {\n    contentText = Mustache.render(TEMPLATE.TYPE, {\n      CSS: CSS,\n      STR: STR,\n      qtype: _qtype,\n      types: getQuestionTypes()\n    });\n  } else {\n    contentText = Mustache.render(TEMPLATE.FORM, {\n      CSS: CSS,\n      STR: STR,\n      answerdata: _answerdata,\n      elementid: getUuid(),\n      qtype: _qtype,\n      name: getQuestionTypes().filter(q => _qtype === q.type)[0].name,\n      marks: _marks,\n      numerical: (_qtype === 'NUMERICAL' || _qtype === 'NM')\n    });\n  }\n  _modal.setBody(contentText);\n  _modal.setFooter(footer);\n  _modal.show();\n  const $root = _modal.getRoot();\n  _form = $root.get(0).querySelector('form');\n\n  if (!nomodalevents) {\n    _modal.registerEventListeners();\n    _modal.registerCloseOnSave();\n    _modal.registerCloseOnCancel();\n    $root.on(ModalEvents.cancel, _cancel);\n\n    if (!qtype) { // For the question list we need the choice handler only, and we are done.\n      $root.on(ModalEvents.save, _choiceHandler);\n      return;\n    } // Handler to add the question string to the editor content.\n    $root.on(ModalEvents.save, _setSubquestion);\n  }\n  // The form needs events for the icons to move up/down, add or delete a response.\n  const getTarget = e => {\n    let p = e.target;\n    while (!isNull(p) && p.nodeType === 1 && p.tagName !== 'A') {\n      p = p.parentNode;\n    }\n    if (isNull(p.classList)) {\n      return null;\n    }\n    return p;\n  };\n\n  _form.addEventListener('click', e => {\n    const p = getTarget(e);\n    if (isNull(p)) {\n      return;\n    }\n    if (p.classList.contains(CSS.DELETE)) {\n      e.preventDefault();\n      _deleteAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.ADD)) {\n      e.preventDefault();\n      _addAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.LOWER)) {\n      e.preventDefault();\n      _lowerAnswer(p);\n      return;\n    }\n    if (p.classList.contains(CSS.RAISE)) {\n      e.preventDefault();\n      _raiseAnswer(p);\n    }\n  });\n  _form.addEventListener('keyup', e => {\n    const p = getTarget(e);\n    if (isNull(p)) {\n      return;\n    }\n    if (p.classList.contains(CSS.ANSWER) || p.classList.contains(CSS.FEEDBACK)) {\n      e.preventDefault();\n      _addAnswer(p);\n    }\n  });\n  _form.querySelectorAll('.' + CSS.FRACTION).forEach((sel) => {\n    sel.addEventListener('change', e => {\n      const id = e.target.getAttribute('id');\n      if (e.target.value === selectCustomPercent) {\n        document.getElementById(id + '_custom').parentNode.classList.remove('hidden');\n      } else {\n        document.getElementById(id + '_custom').parentNode.classList.add('hidden');\n      }\n    });\n  });\n};\n\n/**\n * Handle question choice.\n *\n * @method _choiceHandler\n * @private\n * @param {Event} e Event from button click in chooser\n */\nconst _choiceHandler = function(e) {\n  e.preventDefault();\n  let qtype = _form.querySelector('input[name=qtype]:checked');\n  if (qtype) {\n    _qtype = qtype.value;\n  }\n  const max = (_qtype.indexOf('SHORTANSWER') !== -1 || _qtype === 'NUMERICAL') ? 1 : 3;\n  const blankAnswer = {\n    id: getUuid(),\n    answer: '',\n    feedback: '',\n    fraction: 100,\n    fractionOptions: getFractionOptions(max === 1 ? '=' : ''),\n    tolerance: 0,\n    isCustomGrade: false,\n  };\n  _answerdata = [];\n  for (let x = 0; x < max; x++) {\n    _answerdata.push({...blankAnswer, id: getUuid()});\n  }\n  _modal.destroy();\n  // Our choice is stored in _qtype. We need to create the modal dialogue with the form now.\n  _createModal().then(() => {\n    _setDialogueContent(_qtype);\n    _form.querySelector('.' + CSS.ANSWER).focus();\n    return ''; // Make the linter happy.\n  }).catch(() => {\n      return '';\n  });\n};\n\n/**\n * Parse question and set properties found.\n *\n * @method _parseSubquestion\n * @private\n * @param {String} question The question string\n */\nconst _parseSubquestion = function(question) {\n  _answerdata = []; // Flush answers to have an empty dialogue if something goes wrong parsing the question string.\n  const parts = reQtype.exec(question);\n  reQtype.lastIndex = 0; // Reset lastIndex so that the next match starts from the beginning of the question string.\n  if (!parts) {\n    return;\n  }\n  _marks = parts[1];\n  _qtype = parts[2];\n  // Convert the short notation to the long form e.g. SA to SHORTANSWER.\n  if (_qtype.length < 5) {\n    getQuestionTypes().forEach(l => {\n      for (const a of l.abbr) {\n        if (a === _qtype) {\n          _qtype = l.type;\n          return;\n        }\n      }\n    });\n  }\n  const answers = parts[7].match(/(\\\\.|[^~])*/g);\n  if (!answers) {\n    return;\n  }\n  answers.forEach(function(answer) {\n    const options = /^(%(-?[.0-9]+)%|(=?))((\\\\.|[^#])*)#?(.*)/.exec(answer);\n    if (options && options[4]) {\n      let frac = '';\n      if (options[3]) {\n        frac = options[3] === '=' ? '=' : 100;\n      } else if (options[2]) {\n        frac = options[2];\n      }\n      if (_qtype === 'NUMERICAL' || _qtype === 'NM') {\n        const tolerance = /^([^:]*):?(.*)/.exec(options[4])[2] || 0;\n        _answerdata.push({\n          id: getUuid(),\n          answer: strdecode(options[4].replace(/:.*/, '')),\n          feedback: strdecode(options[6]),\n          tolerance: tolerance,\n          fraction: frac,\n          fractionOptions: getFractionOptions(frac),\n          isCustomGrade: isCustomGrade(frac),\n        });\n        return;\n      }\n      _answerdata.push({\n        answer: strdecode(options[4]),\n        id: getUuid(),\n        feedback: strdecode(options[6]),\n        fraction: frac,\n        fractionOptions: getFractionOptions(frac),\n        isCustomGrade: isCustomGrade(frac),\n      });\n    }\n  });\n};\n\n/**\n * Insert a new set of answer blanks below the button.\n *\n * @method _addAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _addAnswer = function(a) {\n  let index = indexOfNode(_form.querySelectorAll('.' + CSS.ADD), a);\n  if (index === -1) {\n    index = indexOfNode(_form.querySelectorAll('.' + CSS.ANSWER + ', .' + CSS.FEEDBACK), a);\n    if (index !== -1) {\n      index = Math.floor(index / 2) + 1;\n    }\n  }\n  let fraction = '';\n  if (a.closest('li')) {\n    fraction = a.closest('li').querySelector('.' + CSS.FRACTION).value;\n    if (fraction === selectCustomPercent) {\n      fraction = a.closest('li').querySelector('.' + CSS.FRAC_CUSTOM).value;\n    }\n    index = indexOfNode(_form.querySelectorAll('li'), a.closest('li')) + 1;\n  }\n  let tolerance = 0;\n  if (a.closest('li') && a.closest('li').querySelector('.' + CSS.TOLERANCE)) {\n    tolerance = a.closest('li').querySelector('.' + CSS.TOLERANCE).value;\n  }\n  _processFormData();\n  _answerdata.splice(index, 0, {\n    id: getUuid(),\n    answer: '',\n    feedback: '',\n    fraction: fraction,\n    fractionOptions: getFractionOptions(fraction),\n    tolerance: tolerance,\n    isCustomGrade: isCustomGrade(fraction)\n  });\n  _setDialogueContent(_qtype, true);\n  _form.querySelectorAll('.' + CSS.ANSWER).item(index).focus();\n};\n\n/**\n * Delete set of answer next to the button.\n *\n * @method _deleteAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _deleteAnswer = function(a) {\n  let index = indexOfNode(_form.querySelectorAll('.' + CSS.DELETE), a);\n  if (index === -1) {\n    index = indexOfNode(_form.querySelectorAll('li'), a.closest('li'));\n  }\n  _processFormData();\n  _answerdata.splice(index, 1);\n  _setDialogueContent(_qtype, true);\n  const answers = _form.querySelectorAll('.' + CSS.ANSWER);\n  index = Math.min(index, answers.length - 1);\n  answers.item(index).focus();\n};\n\n/**\n * Lower answer option\n *\n * @method _lowerAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _lowerAnswer = function(a) {\n  const li = a.closest('li');\n  li.before(li.nextSibling);\n  li.querySelector('.' + CSS.ANSWER).focus();\n};\n\n/**\n * Raise answer option\n *\n * @method _raiseAnswer\n * @param {Node} a Node that is the referred element\n * @private\n */\nconst _raiseAnswer = function(a) {\n  const li = a.closest('li');\n  li.after(li.previousSibling);\n  li.querySelector('.' + CSS.ANSWER).focus();\n};\n\n/**\n * Reset and hide form.\n *\n * @method _cancel\n * @param {Event} e Event from button click\n * @private\n */\nconst _cancel = function(e) {\n  e.preventDefault();\n  // In case there is a marker where the new question should be inserted in the text it needs to be removed.\n  for (const span of _editor.dom.select('.' + markerClass + '.new')) {\n    span.remove();\n  }\n  _modal.destroy();\n  _editor.focus();\n  _modal = null;\n};\n\n/**\n * Insert question string into editor content and reset and hide form. If the form contains an error\n * nothing happens.\n *\n * @method _setSubquestion\n * @param {Event} e Event from button click\n * @private\n */\nconst _setSubquestion = function(e) {\n  e.preventDefault();\n  if (!_processFormData(true)) {\n    return;\n  }\n\n  // Build the parser function from the data, that is going to be placed into the editor content.\n  let question = '{' + _marks + ':' + _qtype + ':';\n\n  for (let i = 0; i < _answerdata.length; i++) {\n    question += _answerdata[i].fraction && !isNaN(_answerdata[i].fraction)\n      ? '%' + _answerdata[i].fraction + '%' : _answerdata[i].fraction;\n    question += strencode(_answerdata[i].answer);\n    if (_answerdata[i].tolerance) {\n      question += ':' + _answerdata[i].tolerance;\n    }\n    if (_answerdata[i].feedback) {\n      question += '#' + strencode(_answerdata[i].feedback);\n    }\n    if (i < _answerdata.length - 1) {\n      question += '~';\n    }\n  }\n  question += '}';\n\n  _modal.destroy();\n  _modal = null;\n  _editor.focus();\n  if (_selectedOffset > -1) { // We have to replace one of the marker spans (the innerHTML contains the question string).\n    _editor.dom.select('.' + markerClass)[_selectedOffset].innerHTML = question;\n  } else {\n    // Just add the question text with markup.\n    _editor.insertContent(markerSpan + question + '</span>');\n  }\n};\n\n/**\n * Read the form data, process it and store the result in the internal  _answerdata array.\n * Also, is validation is enabled, the custom_grade field is in use and does not contain\n * a number, then the field is marked as an error and the return value is false.\n *\n * @method _processFormData\n * @param {boolean} validate\n * @return {boolean}\n * @private\n */\nconst _processFormData = function(validate) {\n  _answerdata = [];\n  let answer;\n  let hasError = false;\n  const answers = _form.querySelectorAll('.' + CSS.ANSWER);\n  const feedbacks = _form.querySelectorAll('.' + CSS.FEEDBACK);\n  const fractions = _form.querySelectorAll('.' + CSS.FRACTION);\n  const customGrades = _form.querySelectorAll('.' + CSS.FRAC_CUSTOM);\n  const tolerances = _form.querySelectorAll('.' + CSS.TOLERANCE);\n  for (let i = 0; i < answers.length; i++) {\n    customGrades.item(i).classList.remove('error');\n    answer = answers.item(i).value;\n    if (_qtype === 'NM' || _qtype === 'NUMERICAL') {\n      answer = Number(answer);\n    }\n    const currentAnswer = {\n      answer: answer,\n      id: getUuid(),\n      feedback: feedbacks.item(i).value,\n      fraction: fractions.item(i).value === selectCustomPercent ? customGrades.item(i).value : fractions.item(i).value,\n      fractionOptions: getFractionOptions(fractions.item(i).value),\n      tolerance: !isNull(tolerances.item(i)) ? tolerances.item(i).value : 0,\n      isCustomGrade: fractions.item(i).value === selectCustomPercent\n    };\n    if (validate && currentAnswer.isCustomGrade &&\n      (isNaN(currentAnswer.fraction) || currentAnswer.fraction < -100 || currentAnswer.fraction > 100\n        || currentAnswer.fraction.trim() === '')) {\n      hasError = true;\n      customGrades.item(i).classList.add('error');\n    }\n    _answerdata.push(currentAnswer);\n    _marks = _form.querySelector('.' + CSS.MARKS).value;\n  }\n  return !hasError;\n};\n\n/**\n * Check whether cursor is in a subquestion and return subquestion text if\n * true.\n *\n * @method resolveSubquestion\n * @return {Mixed} The selected node of with the subquestion if found, false otherwise.\n */\nconst resolveSubquestion = function() {\n  let span = _editor.selection.getStart();\n  if (!isNull(span.classList) && span.classList.contains(markerClass)) {\n    return span;\n  }\n  _editor.dom.getParents(span, elm => {\n    // Are we in a span that encapsulates the cloze question?\n    if (!isNull(elm.classList) && elm.classList.contains(markerClass)) {\n      return elm;\n    }\n    return false;\n  });\n  return false;\n};\n\nexport {\n  displayDialogue,\n  resolveSubquestion,\n  onInit,\n  onBeforeGetContent,\n  onSubmit,\n};\n"],"names":["isNull","a","strdecode","t","String","replace","strencode","indexOfNode","list","node","i","length","getUuid","crypto","randomUUID","Math","floor","random","toString","getFractionOptions","s","attrSel","isSel","html","STR","incorrect","correct","FRACTIONS","forEach","item","value","indexOf","custom_grade","isCustomGrade","found","markerClass","markerSpan","reQtype","CSS","ANSWER","ANSWERS","ADD","CANCEL","DELETE","FEEDBACK","FRACTION","FRAC_CUSTOM","LEFT","LOWER","RIGHT","MARKS","DUPLICATE","RAISE","SUBMIT","SUMMARY","TOLERANCE","TYPE","TEMPLATE","FORM","M","util","image_url","FOOTER","getQuestionTypes","multichoice","summary_multichoice","selectinline","singleyes","horizontal","vertical","shuffle","multiresponse","multi_vertical","singleno","multi_horizontal","numerical","summary_numerical","shortanswer","summary_shortanswer","caseno","caseyes","_editor","_form","_answerdata","_qtype","_selectedOffset","_marks","_modal","ed","_addMarkers","async","res","Promise","all","component","map","l","getStr","_createModal","cfg","title","templateContext","elementid","id","removeOnClose","large","Modal","create","ModalFactory","subquestion","resolveSubquestion","dom","select","_parseSubquestion","innerHTML","_setDialogueContent","m","content","getContent","newContent","match","pos","substring","level","b","setContent","_removeMarkers","span","setOuterHTML","classList","contains","source_view","onClose","off","on","qtype","nomodalevents","footer","Mustache","render","cancel","btn_cancel","submit","btn_insert","btn_select","contentText","answerdata","name","filter","q","type","marks","types","setBody","setFooter","show","$root","getRoot","get","querySelector","registerEventListeners","registerCloseOnSave","registerCloseOnCancel","ModalEvents","_cancel","save","_choiceHandler","_setSubquestion","getTarget","e","p","target","nodeType","tagName","parentNode","addEventListener","preventDefault","_deleteAnswer","_addAnswer","_lowerAnswer","_raiseAnswer","querySelectorAll","sel","getAttribute","document","getElementById","remove","add","max","blankAnswer","answer","feedback","fraction","fractionOptions","tolerance","x","push","destroy","then","focus","catch","question","parts","exec","lastIndex","abbr","answers","options","frac","index","closest","_processFormData","splice","min","li","before","nextSibling","after","previousSibling","isNaN","insertContent","validate","hasError","feedbacks","fractions","customGrades","tolerances","Number","currentAnswer","trim","selection","getStart","getParents","elm"],"mappings":";;;;;;;2XA+BMA,OAASC,GAAKA,MAAAA,EACdC,UAAYC,GAAKC,OAAOD,GAAGE,QAAQ,cAAe,MAClDC,UAAYH,GAAKC,OAAOD,GAAGE,QAAQ,YAAa,QAChDE,YAAc,CAACC,KAAMC,YACpB,IAAIC,EAAI,EAAGA,EAAIF,KAAKG,OAAQD,OAC3BF,KAAKE,KAAOD,YACPC,SAGH,GAEJE,QAAU,kBACTZ,OAAOa,OAAOC,YAGZ,YAAcC,KAAKC,MAAsB,IAAhBD,KAAKE,UAAmBC,WAF/CL,OAAOC,cAOZK,mBAAqBC,UACnBC,QAAW,2BACbC,MAAc,MAANF,EAAYC,QAAU,GAC9BE,gCAA2BC,IAAIC,+CAAsCH,kBAASE,IAAIE,4BACtFC,UAAUC,SAAQC,OAChBP,MAAQO,KAAKC,MAAMZ,aAAeE,EAAIC,QAAU,GAChDE,+BAA0BM,KAAKC,kBAASR,kBAASO,KAAKC,uBAExDR,MAAc,KAANF,IAAuC,IAA3BG,KAAKQ,QAAQV,SAAkBA,QAAU,GAC7DE,+BAX0B,yBAWuBD,kBAASE,IAAIQ,0BACvDT,MAGHU,cAAgBb,OACV,MAANA,GAAmB,KAANA,SACR,MAELc,OAAQ,SACZP,UAAUC,SAAQC,OACZA,KAAKC,MAAMZ,aAAeE,IAC5Bc,OAAQ,OAGJA,OAGJC,YAAc,wBACdC,WAAa,wCAA0CD,YAAc,sCAGrEE,QAAU,2IAGVC,IAAM,CACVC,OAAQ,oBACRC,QAAS,qBACTC,IAAK,iBACLC,OAAQ,oBACRC,OAAQ,oBACRC,SAAU,sBACVC,SAAU,sBACVC,YAAa,yBACbC,KAAM,kBACNC,MAAO,kBACPC,MAAO,kBACPC,MAAO,mBACPC,UAAW,uBACXC,MAAO,gBACPC,OAAQ,oBACRC,QAAS,qBACTC,UAAW,uBACXC,KAAM,oBAEFC,SAAW,CACbC,KAAM,wYAUJC,EAAEC,KAAKC,UAAU,QAAS,QAVtB,wcAwBJF,EAAEC,KAAKC,UAAU,QAAS,QAxBtB,2FA2BJF,EAAEC,KAAKC,UAAU,WAAY,QA3BzB,sFA8BJF,EAAEC,KAAKC,UAAU,OAAQ,QA9BrB,wFAiCJF,EAAEC,KAAKC,UAAU,SAAU,QAjCvB,mgCAiENL,KAAM,wfAiBNM,OAAQ,gLAGJnC,UAAY,CAChB,CAACG,MAAO,KACR,CAACA,MAAO,IACR,CAACA,MAAO,QAIRN,IAAM,SA8EJuC,iBAAmB,iBAChB,CACL,MACU,mBACA,CAAC,WACDvC,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI0C,aAAc1C,IAAI2C,YAEpC,MACU,qBACA,CAAC,YACD3C,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI4C,WAAY5C,IAAI2C,YAElC,MACU,qBACA,CAAC,YACD3C,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI6C,SAAU7C,IAAI2C,YAEhC,MACU,qBACA,CAAC,YACD3C,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI0C,aAAc1C,IAAI8C,QAAS9C,IAAI2C,YAEjD,MACU,sBACA,CAAC,aACD3C,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI4C,WAAY5C,IAAI8C,QAAS9C,IAAI2C,YAE/C,MACU,sBACA,CAAC,aACD3C,IAAIwC,oBACDxC,IAAIyC,4BACJ,CAACzC,IAAI6C,SAAU7C,IAAI8C,QAAS9C,IAAI2C,YAE7C,MACU,qBACA,CAAC,WACD3C,IAAI+C,sBACD/C,IAAIyC,4BACJ,CAACzC,IAAIgD,eAAgBhD,IAAIiD,WAEtC,MACU,uBACA,CAAC,YACDjD,IAAI+C,sBACD/C,IAAIyC,4BACJ,CAACzC,IAAIkD,iBAAkBlD,IAAIiD,WAExC,MACU,uBACA,CAAC,YACDjD,IAAI+C,sBACD/C,IAAIyC,4BACJ,CAACzC,IAAIgD,eAAgBhD,IAAI8C,QAAS9C,IAAIiD,WAEnD,MACU,wBACA,CAAC,aACDjD,IAAI+C,sBACD/C,IAAIyC,4BACJ,CAACzC,IAAIkD,iBAAkBlD,IAAI8C,QAAS9C,IAAIiD,WAErD,MACU,iBACA,CAAC,WACDjD,IAAImD,kBACDnD,IAAIoD,mBAEjB,MACU,mBACA,CAAC,KAAM,WACPpD,IAAIqD,oBACDrD,IAAIsD,4BACJ,CAACtD,IAAIuD,SAElB,MACU,qBACA,CAAC,MAAO,YACRvD,IAAIqD,oBACDrD,IAAIsD,4BACJ,CAACtD,IAAIwD,gBAWlBC,QAAU,KASVC,MAAQ,KASRC,YAAc,GASdC,OAAS,KAOTC,iBAAmB,EASnBC,OAAS,EAMTC,OAAS,qBAME,SAASC,IACtBP,QAAUO,GAEVC,cA5OaC,iBACPC,UAAYC,QAAQC,IAAI,EAC5B,mBAAU,SAAU,aACpB,mBAAU,mBAAoB,aAC9B,mBAAU,cAAe,aACzB,mBAAU,WAAY,aACtB,mBAAU,UAAW,aACrB,mBAAU,YAAa,aACvB,mBAAU,sBAAuB,qBACjC,mBAAU,SAAU,SACpB,mBAAU,KAAM,SAChB,mBAAU,OAAQ,SAClB,mBAAU,YAAa,qBACvB,mBAAU,QAAS,WACnB,mBAAU,SAAU,aACpB,mBAAU,UAAW,aACrB,mBAAU,iBAAkB,sBAC5B,mBAAU,kBAAmB,sBAC7B,mBAAU,qBAAsB,sBAChC,mBAAU,mBAAoB,sBAC9B,mBAAU,iBAAkB,sBAC5B,mBAAU,gBAAiB,aAC3B,mBAAU,4BAA6B,sBACvC,mBAAU,0BAA2B,sBACrC,mBAAU,oBAAqB,sBAC/B,mBAAU,oBAAqB,sBAC/B,mBAAU,oBAAqB,oBAC/B,mBAAU,cAAeC,oBACzB,mBAAU,gBAAiBA,oBAC3B,mBAAU,YAAa,aACvB,mBAAU,cAAe,aACzB,mBAAU,SAAU,SACpB,mBAAU,SAAUA,oBACpB,mBAAU,SAAUA,oBACpB,mBAAU,aAAcA,oBACxB,mBAAU,cAAeA,sBAGzB,SACA,mBACA,cACA,WACA,UACA,YACA,sBACA,SACA,KACA,OACA,YACA,QACA,SACA,UACA,WACA,YACA,eACA,aACA,WACA,UACA,mBACA,iBACA,sBACA,sBACA,oBACA,cACA,gBACA,YACA,cACA,aACA,aACA,aACA,QACA,gBACAC,KAAI,CAACC,EAAGtF,KACRc,IAAIwE,GAAKL,IAAIjF,GACN,OAoKTuF,UAQIC,aAAeR,uBAEbS,IAAM,CACVC,MAAO5E,IAAI4E,MACXC,gBAAiB,CACfC,UAAWrB,QAAQsB,IAErBC,eAAe,EACfC,OAAO,GAGPlB,OAD0B,mBAAjBmB,gBAAMC,aACAD,gBAAMC,OAAOR,WAEbS,uBAAaD,OAAOR,+BAWfT,uBAChBQ,mBAGFW,YAAcC,qBACdD,aAEFxB,gBAAkB9E,YAAY0E,QAAQ8B,IAAIC,OAAO,IAAM7E,aAAc0E,aACrEI,kBAAkBJ,YAAYK,WAC9BC,oBAAoB/B,UAGpBC,iBAAmB,EACnB8B,8BAYE1B,YAAc,eAUd2B,EARAC,QAAUpC,QAAQqC,aAClBC,WAAa,OAGqB,IAAlCF,QAAQtF,QAAQI,gBAKjB,IACDiF,EAAIC,QAAQG,MAAMnF,UACb+E,EAAG,CACNG,YAAcF,oBAIVI,IAAMJ,QAAQtF,QAAQqF,EAAE,IAC9BG,YAAcF,QAAQK,UAAU,EAAGD,KAAOrF,WAAaiF,QAAQK,UAAUD,IAAKA,IAAML,EAAE,GAAGzG,QACzF0G,QAAUA,QAAQK,UAAUD,IAAML,EAAE,GAAGzG,YAGnCgH,OAASP,EAAE,GAAGI,MAAM,QAAU,IAAI7G,UACxB,IAAVgH,YAMGA,MAAQ,GAAG,OACV1H,EAAIoH,QAAQtF,QAAQ,KACpB6F,EAAIP,QAAQtF,QAAQ,KACtB9B,GAAK,GAAK2H,GAAK,GAAK3H,EAAI2H,GAC1BD,QACAJ,WAAaF,QAAQK,UAAU,EAAGzH,GAClCoH,QAAUA,QAAQK,UAAUzH,EAAI,IACvB2H,GAAK,GACdL,WAAaF,QAAQK,UAAU,EAAGE,GAClCP,QAAUA,QAAQK,UAAUE,EAAI,GAChCD,SAEAA,MAAQ,EAGZJ,YAAc,eAnBZA,YAAc,gBAoBTH,GACTnC,QAAQ4C,WAAWN,cAOfO,eAAiB,eAChB,MAAMC,QAAQ9C,QAAQ8B,IAAIC,OAAO,QAAU7E,aAC9C8C,QAAQ8B,IAAIiB,aAAaD,KAAMA,KAAKE,UAAUC,SAAS,OAAS,GAAKH,KAAKb,wCAWnD,SAASG,aAC7BrH,OAAOqH,QAAQc,eAAwC,IAAxBd,QAAQc,YAAsB,KAG5DC,QAAU,WACZnD,QAAQoD,IAAI,QAASD,SACrB3C,eAEFR,QAAQqD,GAAG,eAAe,KACxBF,aAGG7C,QACHuC,qCAQW,WACfA,wBAeIX,oBAAsB,SAASoB,MAAOC,qBACpCC,OAASC,kBAASC,OAAOlF,SAASK,OAAQ,CAC9C8E,OAAQpH,IAAIqH,WACZC,OAASP,MAAyB/G,IAAIuH,WAArBvH,IAAIwH,iBAEnBC,YASFA,YARGV,MAQWG,kBAASC,OAAOlF,SAASC,KAAM,CAC3CpB,IAAKA,IACLd,IAAKA,IACL0H,WAAY/D,YACZmB,UAAW1F,UACX2H,MAAOnD,OACP+D,KAAMpF,mBAAmBqF,QAAOC,GAAKjE,SAAWiE,EAAEC,OAAM,GAAGH,KAC3DI,MAAOjE,OACPX,UAAuB,cAAXS,QAAqC,OAAXA,SAf1BsD,kBAASC,OAAOlF,SAASD,KAAM,CAC3ClB,IAAKA,IACLd,IAAKA,IACL+G,MAAOnD,OACPoE,MAAOzF,qBAcXwB,OAAOkE,QAAQR,aACf1D,OAAOmE,UAAUjB,QACjBlD,OAAOoE,aACDC,MAAQrE,OAAOsE,aACrB3E,MAAQ0E,MAAME,IAAI,GAAGC,cAAc,SAE9BvB,cAAe,IAClBjD,OAAOyE,yBACPzE,OAAO0E,sBACP1E,OAAO2E,wBACPN,MAAMtB,GAAG6B,sBAAYvB,OAAQwB,UAExB7B,kBACHqB,MAAMtB,GAAG6B,sBAAYE,KAAMC,gBAG7BV,MAAMtB,GAAG6B,sBAAYE,KAAME,uBAGvBC,UAAYC,QACZC,EAAID,EAAEE,aACF3K,OAAO0K,IAAqB,IAAfA,EAAEE,UAAgC,MAAdF,EAAEG,SACzCH,EAAIA,EAAEI,kBAEJ9K,OAAO0K,EAAEzC,WACJ,KAEFyC,GAGTxF,MAAM6F,iBAAiB,SAASN,UACxBC,EAAIF,UAAUC,OAChBzK,OAAO0K,UAGPA,EAAEzC,UAAUC,SAAS5F,IAAIK,SAC3B8H,EAAEO,sBACFC,cAAcP,IAGZA,EAAEzC,UAAUC,SAAS5F,IAAIG,MAC3BgI,EAAEO,sBACFE,WAAWR,IAGTA,EAAEzC,UAAUC,SAAS5F,IAAIU,QAC3ByH,EAAEO,sBACFG,aAAaT,SAGXA,EAAEzC,UAAUC,SAAS5F,IAAIc,SAC3BqH,EAAEO,iBACFI,aAAaV,QAGjBxF,MAAM6F,iBAAiB,SAASN,UACxBC,EAAIF,UAAUC,GAChBzK,OAAO0K,KAGPA,EAAEzC,UAAUC,SAAS5F,IAAIC,SAAWmI,EAAEzC,UAAUC,SAAS5F,IAAIM,aAC/D6H,EAAEO,iBACFE,WAAWR,OAGfxF,MAAMmG,iBAAiB,IAAM/I,IAAIO,UAAUjB,SAAS0J,MAClDA,IAAIP,iBAAiB,UAAUN,UACvBlE,GAAKkE,EAAEE,OAAOY,aAAa,MAhoBX,eAioBlBd,EAAEE,OAAO7I,MACX0J,SAASC,eAAelF,GAAK,WAAWuE,WAAW7C,UAAUyD,OAAO,UAEpEF,SAASC,eAAelF,GAAK,WAAWuE,WAAW7C,UAAU0D,IAAI,iBAanErB,eAAiB,SAASG,GAC9BA,EAAEO,qBACEzC,MAAQrD,MAAM6E,cAAc,6BAC5BxB,QACFnD,OAASmD,MAAMzG,aAEX8J,KAA0C,IAAnCxG,OAAOrD,QAAQ,gBAAoC,cAAXqD,OAA0B,EAAI,EAC7EyG,YAAc,CAClBtF,GAAI3F,UACJkL,OAAQ,GACRC,SAAU,GACVC,SAAU,IACVC,gBAAiB9K,mBAA2B,IAARyK,IAAY,IAAM,IACtDM,UAAW,EACXjK,eAAe,GAEjBkD,YAAc,OACT,IAAIgH,EAAI,EAAGA,EAAIP,IAAKO,IACvBhH,YAAYiH,KAAK,IAAIP,YAAatF,GAAI3F,YAExC2E,OAAO8G,UAEPnG,eAAeoG,MAAK,KAClBnF,oBAAoB/B,QACpBF,MAAM6E,cAAc,IAAMzH,IAAIC,QAAQgK,QAC/B,MACNC,OAAM,IACE,MAWPvF,kBAAoB,SAASwF,UACjCtH,YAAc,SACRuH,MAAQrK,QAAQsK,KAAKF,aAC3BpK,QAAQuK,UAAY,GACfF,aAGLpH,OAASoH,MAAM,GACftH,OAASsH,MAAM,GAEXtH,OAAOzE,OAAS,GAClBoD,mBAAmBnC,SAAQoE,QACpB,MAAM/F,KAAK+F,EAAE6G,QACZ5M,IAAMmF,mBACRA,OAASY,EAAEsD,eAMbwD,QAAUJ,MAAM,GAAGlF,MAAM,gBAC1BsF,SAGLA,QAAQlL,SAAQ,SAASkK,cACjBiB,QAAU,2CAA2CJ,KAAKb,WAC5DiB,SAAWA,QAAQ,GAAI,KACrBC,KAAO,MACPD,QAAQ,GACVC,KAAsB,MAAfD,QAAQ,GAAa,IAAM,IACzBA,QAAQ,KACjBC,KAAOD,QAAQ,IAEF,cAAX3H,QAAqC,OAAXA,OAAiB,OACvC8G,UAAY,iBAAiBS,KAAKI,QAAQ,IAAI,IAAM,cAC1D5H,YAAYiH,KAAK,CACf7F,GAAI3F,UACJkL,OAAQ5L,UAAU6M,QAAQ,GAAG1M,QAAQ,MAAO,KAC5C0L,SAAU7L,UAAU6M,QAAQ,IAC5Bb,UAAWA,UACXF,SAAUgB,KACVf,gBAAiB9K,mBAAmB6L,MACpC/K,cAAeA,cAAc+K,QAIjC7H,YAAYiH,KAAK,CACfN,OAAQ5L,UAAU6M,QAAQ,IAC1BxG,GAAI3F,UACJmL,SAAU7L,UAAU6M,QAAQ,IAC5Bf,SAAUgB,KACVf,gBAAiB9K,mBAAmB6L,MACpC/K,cAAeA,cAAc+K,aAa/B9B,WAAa,SAASjL,OACtBgN,MAAQ1M,YAAY2E,MAAMmG,iBAAiB,IAAM/I,IAAIG,KAAMxC,IAChD,IAAXgN,QACFA,MAAQ1M,YAAY2E,MAAMmG,iBAAiB,IAAM/I,IAAIC,OAAS,MAAQD,IAAIM,UAAW3C,IACtE,IAAXgN,QACFA,MAAQlM,KAAKC,MAAMiM,MAAQ,GAAK,QAGhCjB,SAAW,GACX/L,EAAEiN,QAAQ,QACZlB,SAAW/L,EAAEiN,QAAQ,MAAMnD,cAAc,IAAMzH,IAAIO,UAAUf,MAlwBrC,eAmwBpBkK,WACFA,SAAW/L,EAAEiN,QAAQ,MAAMnD,cAAc,IAAMzH,IAAIQ,aAAahB,OAElEmL,MAAQ1M,YAAY2E,MAAMmG,iBAAiB,MAAOpL,EAAEiN,QAAQ,OAAS,OAEnEhB,UAAY,EACZjM,EAAEiN,QAAQ,OAASjN,EAAEiN,QAAQ,MAAMnD,cAAc,IAAMzH,IAAIiB,aAC7D2I,UAAYjM,EAAEiN,QAAQ,MAAMnD,cAAc,IAAMzH,IAAIiB,WAAWzB,OAEjEqL,mBACAhI,YAAYiI,OAAOH,MAAO,EAAG,CAC3B1G,GAAI3F,UACJkL,OAAQ,GACRC,SAAU,GACVC,SAAUA,SACVC,gBAAiB9K,mBAAmB6K,UACpCE,UAAWA,UACXjK,cAAeA,cAAc+J,YAE/B7E,oBAAoB/B,QAAQ,GAC5BF,MAAMmG,iBAAiB,IAAM/I,IAAIC,QAAQV,KAAKoL,OAAOV,SAUjDtB,cAAgB,SAAShL,OACzBgN,MAAQ1M,YAAY2E,MAAMmG,iBAAiB,IAAM/I,IAAIK,QAAS1C,IACnD,IAAXgN,QACFA,MAAQ1M,YAAY2E,MAAMmG,iBAAiB,MAAOpL,EAAEiN,QAAQ,QAE9DC,mBACAhI,YAAYiI,OAAOH,MAAO,GAC1B9F,oBAAoB/B,QAAQ,SACtB0H,QAAU5H,MAAMmG,iBAAiB,IAAM/I,IAAIC,QACjD0K,MAAQlM,KAAKsM,IAAIJ,MAAOH,QAAQnM,OAAS,GACzCmM,QAAQjL,KAAKoL,OAAOV,SAUhBpB,aAAe,SAASlL,SACtBqN,GAAKrN,EAAEiN,QAAQ,MACrBI,GAAGC,OAAOD,GAAGE,aACbF,GAAGvD,cAAc,IAAMzH,IAAIC,QAAQgK,SAU/BnB,aAAe,SAASnL,SACtBqN,GAAKrN,EAAEiN,QAAQ,MACrBI,GAAGG,MAAMH,GAAGI,iBACZJ,GAAGvD,cAAc,IAAMzH,IAAIC,QAAQgK,SAU/BnC,QAAU,SAASK,GACvBA,EAAEO,qBAEG,MAAMjD,QAAQ9C,QAAQ8B,IAAIC,OAAO,IAAM7E,YAAc,QACxD4F,KAAK2D,SAEPnG,OAAO8G,UACPpH,QAAQsH,QACRhH,OAAS,MAWLgF,gBAAkB,SAASE,MAC/BA,EAAEO,kBACGmC,kBAAiB,cAKlBV,SAAW,IAAMnH,OAAS,IAAMF,OAAS,QAExC,IAAI1E,EAAI,EAAGA,EAAIyE,YAAYxE,OAAQD,IACtC+L,UAAYtH,YAAYzE,GAAGsL,WAAa2B,MAAMxI,YAAYzE,GAAGsL,UACzD,IAAM7G,YAAYzE,GAAGsL,SAAW,IAAM7G,YAAYzE,GAAGsL,SACzDS,UAAYnM,UAAU6E,YAAYzE,GAAGoL,QACjC3G,YAAYzE,GAAGwL,YACjBO,UAAY,IAAMtH,YAAYzE,GAAGwL,WAE/B/G,YAAYzE,GAAGqL,WACjBU,UAAY,IAAMnM,UAAU6E,YAAYzE,GAAGqL,WAEzCrL,EAAIyE,YAAYxE,OAAS,IAC3B8L,UAAY,KAGhBA,UAAY,IAEZlH,OAAO8G,UACP9G,OAAS,KACTN,QAAQsH,QACJlH,iBAAmB,EACrBJ,QAAQ8B,IAAIC,OAAO,IAAM7E,aAAakD,iBAAiB6B,UAAYuF,SAGnExH,QAAQ2I,cAAcxL,WAAaqK,SAAW,YAc5CU,iBAAmB,SAASU,cAE5B/B,OADJ3G,YAAc,OAEV2I,UAAW,QACThB,QAAU5H,MAAMmG,iBAAiB,IAAM/I,IAAIC,QAC3CwL,UAAY7I,MAAMmG,iBAAiB,IAAM/I,IAAIM,UAC7CoL,UAAY9I,MAAMmG,iBAAiB,IAAM/I,IAAIO,UAC7CoL,aAAe/I,MAAMmG,iBAAiB,IAAM/I,IAAIQ,aAChDoL,WAAahJ,MAAMmG,iBAAiB,IAAM/I,IAAIiB,eAC/C,IAAI7C,EAAI,EAAGA,EAAIoM,QAAQnM,OAAQD,IAAK,CACvCuN,aAAapM,KAAKnB,GAAGuH,UAAUyD,OAAO,SACtCI,OAASgB,QAAQjL,KAAKnB,GAAGoB,MACV,OAAXsD,QAA8B,cAAXA,SACrB0G,OAASqC,OAAOrC,eAEZsC,cAAgB,CACpBtC,OAAQA,OACRvF,GAAI3F,UACJmL,SAAUgC,UAAUlM,KAAKnB,GAAGoB,MAC5BkK,SAn6BsB,eAm6BZgC,UAAUnM,KAAKnB,GAAGoB,MAAgCmM,aAAapM,KAAKnB,GAAGoB,MAAQkM,UAAUnM,KAAKnB,GAAGoB,MAC3GmK,gBAAiB9K,mBAAmB6M,UAAUnM,KAAKnB,GAAGoB,OACtDoK,UAAYlM,OAAOkO,WAAWrM,KAAKnB,IAAiC,EAA3BwN,WAAWrM,KAAKnB,GAAGoB,MAC5DG,cAt6BsB,eAs6BP+L,UAAUnM,KAAKnB,GAAGoB,OAE/B+L,UAAYO,cAAcnM,gBAC3B0L,MAAMS,cAAcpC,WAAaoC,cAAcpC,UAAY,KAAOoC,cAAcpC,SAAW,KACrD,KAAlCoC,cAAcpC,SAASqC,UAC5BP,UAAW,EACXG,aAAapM,KAAKnB,GAAGuH,UAAU0D,IAAI,UAErCxG,YAAYiH,KAAKgC,eACjB9I,OAASJ,MAAM6E,cAAc,IAAMzH,IAAIY,OAAOpB,aAExCgM,UAUJhH,mBAAqB,eACrBiB,KAAO9C,QAAQqJ,UAAUC,kBACxBvO,OAAO+H,KAAKE,YAAcF,KAAKE,UAAUC,SAAS/F,aAC9C4F,MAET9C,QAAQ8B,IAAIyH,WAAWzG,MAAM0G,OAEtBzO,OAAOyO,IAAIxG,aAAcwG,IAAIxG,UAAUC,SAAS/F,eAC5CsM,OAIJ"}
\ No newline at end of file
diff --git a/amd/src/ui.js b/amd/src/ui.js
index 1b75775..e836576 100644
--- a/amd/src/ui.js
+++ b/amd/src/ui.js
@@ -46,22 +46,33 @@ const getUuid = function() {
   }
   return 'ed-cloze-' + Math.floor(Math.random() * 100000).toString();
 };
-
+// Grade Selector value when custom percentage is selected.
+const selectCustomPercent = '__custom__';
 // This is a specific helper function to return the options html for the fraction select element.
 const getFractionOptions = s => {
-  let html = '<option value="">' + STR.incorrect + '</option><option value="="';
-  if (s === '=') {
-    html += ' selected="selected"';
+  const attrSel =  ' selected="selected"';
+  let isSel = s === '=' ? attrSel : '';
+  let html = `<option value="">${STR.incorrect}</option><option value="="${isSel}>${STR.correct}</option>`;
+  FRACTIONS.forEach(item => {
+    isSel = item.value.toString() === s ? attrSel : '';
+    html += `<option value="${item.value}"${isSel}>${item.value}%</option>`;
+  });
+  isSel = s !== '' && html.indexOf(attrSel) === -1 ? attrSel : '';
+  html += `<option value="${selectCustomPercent}"${isSel}>${STR.custom_grade}</option>`;
+  return html;
+};
+// Check if the value is a custom grade value (in order to show the input field).
+const isCustomGrade = s => {
+  if (s === '=' || s === '') {
+    return false;
   }
-  html += '>' + STR.correct + '</option>';
+  let found = false;
   FRACTIONS.forEach(item => {
-    html += '<option value="' + item.value + '"';
     if (item.value.toString() === s) {
-      html += ' selected="selected"';
+      found = true;
     }
-    html += '>' + item.value + '%</option>';
   });
-  return html;
+  return !found;
 };
 // Marker class and the whole span element that is used to encapsulate the cloze question text.
 const markerClass = 'cloze-question-marker';
@@ -79,6 +90,7 @@ const CSS = {
   DELETE: 'tiny_cloze_delete',
   FEEDBACK: 'tiny_cloze_feedback',
   FRACTION: 'tiny_cloze_fraction',
+  FRAC_CUSTOM: 'tiny_cloze_frac_custom',
   LEFT: 'tiny_cloze_col0',
   LOWER: 'tiny_cloze_down',
   RIGHT: 'tiny_cloze_col1',
@@ -148,6 +160,10 @@ const TEMPLATE = {
       '{{{fractionOptions}}}' +
       '</select>' +
       '</div>' +
+      '<div class="{{CSS.RIGHT}} form-group{{^isCustomGrade}} hidden{{/isCustomGrade}}">' +
+      '<input id="{{id}}_grade_custom" type="text"{{#isCustomGrade}} value="{{fraction}}"{{/isCustomGrade}} ' +
+      'class="{{CSS.FRAC_CUSTOM}} form-control d-inline mx-2" style="width: 4rem;" />%' +
+      '</div>' +
       '</div></li>' +
       '{{/answerdata}}</ol></div>' +
       '</form>' +
@@ -175,27 +191,7 @@ const TEMPLATE = {
   const FRACTIONS = [
     {value: 100},
     {value: 50},
-    {value: 33.33333},
-    {value: 25},
-    {value: 20},
-    {value: 16.66667},
-    {value: 14.28571},
-    {value: 12.5},
-    {value: 11.11111},
-    {value: 10},
-    {value: 5},
     {value: 0},
-    {value: -5},
-    {value: -10},
-    {value: -11.11111},
-    {value: -12.5},
-    {value: -14.28571},
-    {value: -16.66667},
-    {value: -20},
-    {value: -25},
-    {value: -33.333},
-    {value: -50},
-    {value: -100},
   ];
 
 // Language strings used in the modal dialogue.
@@ -235,6 +231,7 @@ const getStr = async() => {
     getString('select', component),
     getString('insert', component),
     getString('pluginname', component),
+    getString('customgrade', component),
   ]);
   [
     'answer',
@@ -270,6 +267,7 @@ const getStr = async() => {
     'btn_select',
     'btn_insert',
     'title',
+    'custom_grade',
   ].map((l, i) => {
     STR[l] = res[i];
     return ''; // Make the linter happy.
@@ -589,7 +587,7 @@ const onSubmit = function() {
  * Set the dialogue content for the tool, attaching any required events. Either the modal dialogue displays
  * a list of the question types for the form for a particular question to edit. The set content is also
  * called when the form has changed (up or down move, deletion and adding a response). We must be aware of that
- * an event to the dialogue buttons must attached once only. Therefore when the form content is modified, only
+ * an event to the dialogue buttons must be attached once only. Therefore, when the form content is modified, only
  * the form events for the answers are set again, the general events are nor (nomodalevents is true then).
  *
  * @method _setDialogueContent
@@ -687,6 +685,16 @@ const _setDialogueContent = function(qtype, nomodalevents) {
       _addAnswer(p);
     }
   });
+  _form.querySelectorAll('.' + CSS.FRACTION).forEach((sel) => {
+    sel.addEventListener('change', e => {
+      const id = e.target.getAttribute('id');
+      if (e.target.value === selectCustomPercent) {
+        document.getElementById(id + '_custom').parentNode.classList.remove('hidden');
+      } else {
+        document.getElementById(id + '_custom').parentNode.classList.add('hidden');
+      }
+    });
+  });
 };
 
 /**
@@ -702,16 +710,20 @@ const _choiceHandler = function(e) {
   if (qtype) {
     _qtype = qtype.value;
   }
-  const one = _qtype.indexOf('SHORTANSWER') !== -1 || _qtype === 'NUMERICAL';
+  const max = (_qtype.indexOf('SHORTANSWER') !== -1 || _qtype === 'NUMERICAL') ? 1 : 3;
   const blankAnswer = {
     id: getUuid(),
     answer: '',
     feedback: '',
     fraction: 100,
-    fractionOptions: getFractionOptions(one ? '=' : ''),
-    tolerance: 0
+    fractionOptions: getFractionOptions(max === 1 ? '=' : ''),
+    tolerance: 0,
+    isCustomGrade: false,
   };
-  _answerdata = one ? [blankAnswer] : [blankAnswer, blankAnswer, blankAnswer];
+  _answerdata = [];
+  for (let x = 0; x < max; x++) {
+    _answerdata.push({...blankAnswer, id: getUuid()});
+  }
   _modal.destroy();
   // Our choice is stored in _qtype. We need to create the modal dialogue with the form now.
   _createModal().then(() => {
@@ -757,7 +769,7 @@ const _parseSubquestion = function(question) {
   answers.forEach(function(answer) {
     const options = /^(%(-?[.0-9]+)%|(=?))((\\.|[^#])*)#?(.*)/.exec(answer);
     if (options && options[4]) {
-      let frac = 0;
+      let frac = '';
       if (options[3]) {
         frac = options[3] === '=' ? '=' : 100;
       } else if (options[2]) {
@@ -772,6 +784,7 @@ const _parseSubquestion = function(question) {
           tolerance: tolerance,
           fraction: frac,
           fractionOptions: getFractionOptions(frac),
+          isCustomGrade: isCustomGrade(frac),
         });
         return;
       }
@@ -781,6 +794,7 @@ const _parseSubquestion = function(question) {
         feedback: strdecode(options[6]),
         fraction: frac,
         fractionOptions: getFractionOptions(frac),
+        isCustomGrade: isCustomGrade(frac),
       });
     }
   });
@@ -804,20 +818,24 @@ const _addAnswer = function(a) {
   let fraction = '';
   if (a.closest('li')) {
     fraction = a.closest('li').querySelector('.' + CSS.FRACTION).value;
+    if (fraction === selectCustomPercent) {
+      fraction = a.closest('li').querySelector('.' + CSS.FRAC_CUSTOM).value;
+    }
     index = indexOfNode(_form.querySelectorAll('li'), a.closest('li')) + 1;
   }
   let tolerance = 0;
   if (a.closest('li') && a.closest('li').querySelector('.' + CSS.TOLERANCE)) {
     tolerance = a.closest('li').querySelector('.' + CSS.TOLERANCE).value;
   }
-  _getFormData();
+  _processFormData();
   _answerdata.splice(index, 0, {
     id: getUuid(),
     answer: '',
     feedback: '',
     fraction: fraction,
     fractionOptions: getFractionOptions(fraction),
-    tolerance: tolerance
+    tolerance: tolerance,
+    isCustomGrade: isCustomGrade(fraction)
   });
   _setDialogueContent(_qtype, true);
   _form.querySelectorAll('.' + CSS.ANSWER).item(index).focus();
@@ -835,7 +853,7 @@ const _deleteAnswer = function(a) {
   if (index === -1) {
     index = indexOfNode(_form.querySelectorAll('li'), a.closest('li'));
   }
-  _getFormData();
+  _processFormData();
   _answerdata.splice(index, 1);
   _setDialogueContent(_qtype, true);
   const answers = _form.querySelectorAll('.' + CSS.ANSWER);
@@ -888,7 +906,8 @@ const _cancel = function(e) {
 };
 
 /**
- * Insert question string into editor content and reset and hide form.
+ * Insert question string into editor content and reset and hide form. If the form contains an error
+ * nothing happens.
  *
  * @method _setSubquestion
  * @param {Event} e Event from button click
@@ -896,7 +915,9 @@ const _cancel = function(e) {
  */
 const _setSubquestion = function(e) {
   e.preventDefault();
-  _getFormData();
+  if (!_processFormData(true)) {
+    return;
+  }
 
   // Build the parser function from the data, that is going to be placed into the editor content.
   let question = '{' + _marks + ':' + _qtype + ':';
@@ -930,32 +951,48 @@ const _setSubquestion = function(e) {
 
 /**
  * Read the form data, process it and store the result in the internal  _answerdata array.
+ * Also, is validation is enabled, the custom_grade field is in use and does not contain
+ * a number, then the field is marked as an error and the return value is false.
  *
- * @method _getFormData
+ * @method _processFormData
+ * @param {boolean} validate
+ * @return {boolean}
  * @private
  */
-const _getFormData = function() {
+const _processFormData = function(validate) {
   _answerdata = [];
   let answer;
+  let hasError = false;
   const answers = _form.querySelectorAll('.' + CSS.ANSWER);
   const feedbacks = _form.querySelectorAll('.' + CSS.FEEDBACK);
   const fractions = _form.querySelectorAll('.' + CSS.FRACTION);
+  const customGrades = _form.querySelectorAll('.' + CSS.FRAC_CUSTOM);
   const tolerances = _form.querySelectorAll('.' + CSS.TOLERANCE);
   for (let i = 0; i < answers.length; i++) {
+    customGrades.item(i).classList.remove('error');
     answer = answers.item(i).value;
     if (_qtype === 'NM' || _qtype === 'NUMERICAL') {
       answer = Number(answer);
     }
-    _answerdata.push({
+    const currentAnswer = {
       answer: answer,
       id: getUuid(),
       feedback: feedbacks.item(i).value,
-      fraction: fractions.item(i).value,
+      fraction: fractions.item(i).value === selectCustomPercent ? customGrades.item(i).value : fractions.item(i).value,
       fractionOptions: getFractionOptions(fractions.item(i).value),
-      tolerance: !isNull(tolerances.item(i)) ? tolerances.item(i).value : 0
-    });
+      tolerance: !isNull(tolerances.item(i)) ? tolerances.item(i).value : 0,
+      isCustomGrade: fractions.item(i).value === selectCustomPercent
+    };
+    if (validate && currentAnswer.isCustomGrade &&
+      (isNaN(currentAnswer.fraction) || currentAnswer.fraction < -100 || currentAnswer.fraction > 100
+        || currentAnswer.fraction.trim() === '')) {
+      hasError = true;
+      customGrades.item(i).classList.add('error');
+    }
+    _answerdata.push(currentAnswer);
     _marks = _form.querySelector('.' + CSS.MARKS).value;
   }
+  return !hasError;
 };
 
 /**
diff --git a/lang/en/tiny_cloze.php b/lang/en/tiny_cloze.php
index ca97e40..19548b1 100644
--- a/lang/en/tiny_cloze.php
+++ b/lang/en/tiny_cloze.php
@@ -26,6 +26,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $string['cloze:viewplugin'] = 'Helper to edit cloze questions';
+$string['customgrade'] = 'Custom';
 $string['helplinktext'] = 'Cloze question editor';
 $string['pluginname'] = 'Cloze question editor';
 $string['privacy:metadata'] = 'Cloze Editor does not store any personal data';
diff --git a/styles.css b/styles.css
index d45754e..837c2d2 100644
--- a/styles.css
+++ b/styles.css
@@ -6,6 +6,10 @@
     width: unset;
 }
 
+.tiny_cloze .error {
+    border-color: red;
+}
+
 .tiny_cloze_answers {
     height: 375px;
     overflow-x: hidden;