To allow chips to contain spaces for more then word ordering.

To clear clozeand to see initial placeholder.

Move all 'main' code into global wrapper like and

On the InteractiveBase card type, the front of the card works perfectly, but the back of the card shows this error message:

Invalid HTML on card: SyntaxError: Unexpected identifier
SyntaxError: Unexpected identifier
at eval ()
at http://127.0.0.1:61241/_anki/js/vendor/jquery.js:2:2651
at Function.globalEval (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:2:2662)
at Ha (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:21262)
at n.fn.init.append (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:22791)
at n.fn.init. (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:24070)
at Y (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:4515)
at n.fn.init.html (http://127.0.0.1:61241/_anki/js/vendor/jquery.js:3:23660)
at http://127.0.0.1:61241/_anki/js/reviewer.js:36:16

I tested deleting each portion of JavaScript and found that this portion was the culprit:

<script>(function(){ let answered = Persistence.getItem('answer') || ""; let correct = "{{Answer}}"; let the_input = document.querySelector("my-input"); let case_sens = answered != answered.toLowerCase(); function compare() { if( ! answered ) return 'ground'; let ans = answered, tru = correct; if(!case_sens) { ans = answered.toLowerCase(); tru = correct.toLowerCase(); } if( ans !== tru ) return 'missed'; return 'correct' } the_input.classList.add(compare()); the_input.addEventListener('click', ev => { if( the_input.classList.contains('answered') ) { the_input.value = correct; the_input.classList.remove('answered'); the_input.classList.add(compare()); } else if ( answered ) { the_input.value = answered; the_input.classList.remove('ground', 'correct', 'missed'); the_input.classList.add('answered'); } }); })(); </script>

_Deleting it ruins the type-in answer format of the card. Is there possibly ay fix for this? I have modified the code slightly to suit my needs better, so maybe this had had some effect? I suspect that my modifications have caused some issues, as the original InteractiveBase card still works perfectly fine.

I will paste the full HTML & CSS used on my modified cards below:_

Front:

<script>// v0.5.0 - https://github.com/SimonLammer/anki-persistence/blob/3e08d4437272b869dc3ccb48369b3482ccea4c9f/script.js if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}</script> <script>if(!Persistence.isAvailable()) { /* dumb implementaion */ window.Persistence = { isAvailable: function() { return false; }, clear: function(){}, getItem: function(){}, setItem: function(){}, removeItem: function(){} }; } function debug(message) { let d = document.querySelector("#debug"); if(!d) return; d.textContent += "\n"+message; } String.prototype.splitrim = function (sep) { return this.split(sep).map(e => e.trim()); }; function split_choices(str) { return str.splitrim(/
|\|/).filter(e => e !== ""); } String.prototype.stripspaces = function() { return this.replace(/\s+/g, ' '); }; function placeCaretAtEnd(el) { if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } function hide(elem) { elem.classList.add('hidden'); }; function show(elem) { elem.classList.remove('hidden'); }; function toggle(elem) { elem.classList.toggle('hidden'); };</script> <script>/** @license @nocompile Copyright (c) 2018 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ (function(){'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function l(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} function n(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} function p(b,a,d){d=void 0===d?new Set:d;for(var c=b;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,a,d);c=n(b,e);continue}else if("template"===f){c=n(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,a,d)}c=c.firstChild?c.firstChild:n(b,c)}}function r(b,a,d){b[a]=d};function u(){this.a=new Map;this.s=new Map;this.f=[];this.b=!1}function ba(b,a,d){b.a.set(a,d);b.s.set(d.constructor,d)}function v(b,a){b.b=!0;b.f.push(a)}function w(b,a){b.b&&p(a,function(a){return x(b,a)})}function x(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var d=0;d <script>if( customElements.get('my-input') === undefined ) { customElements.define('my-input', class MyInput extends HTMLElement { /** Wrapper around input to make it like MD text field box * @prop placholder -- to pass to input */ connectedCallback() { this.readonly = this.hasAttribute('readonly'); this.placeholder = this.getAttribute('placeholder') || "…"; this._render(); this.value = (this.getAttribute('value') || "").trim(); if(!this.readonly) { this._bind_events(); } } _render() { this.innerHTML = `

---

`; this._input = this.querySelector('input'); } _bind_events() { this._input.addEventListener('focus', e => { this.classList.add('focus'); }); this._input.addEventListener('blur', e => { this.classList.remove('focus'); }); } get value() { return this._input.value.trim(); } set value(val) { this._input.value = val; } }); }</script>

{{^Cover}}{{#Header}}

{{Header}}

{{/Header}}{{/Cover}} {{#Cover}}

{{Cover}} {{#Header}}

{{Header}}

{{/Header}}

{{/Cover}} {{#Intro}}

{{Intro}}

---

{{/Intro}}

    <div class="text">
        <p>{{Question}}</p>
    </div>
    <hr>
    <my-input placeholder="Answer">
    </my-input>
</div>
<div class="flex"></div>
{{#Instruction}}<p class="instruction">{{Instruction}}</p>{{/Instruction}}

<script>(function(){ Persistence.setItem('answer', null); let the_input = document.querySelector("my-input"); the_input.addEventListener('input', e=>{ Persistence.setItem('answer', the_input.value); }) })(); </script>

Back:

<script>// v0.5.0 - https://github.com/SimonLammer/anki-persistence/blob/3e08d4437272b869dc3ccb48369b3482ccea4c9f/script.js if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}</script> <script>if(!Persistence.isAvailable()) { /* dumb implementaion */ window.Persistence = { isAvailable: function() { return false; }, clear: function(){}, getItem: function(){}, setItem: function(){}, removeItem: function(){} }; } function debug(message) { let d = document.querySelector("#debug"); if(!d) return; d.textContent += "\n"+message; } String.prototype.splitrim = function (sep) { return this.split(sep).map(e => e.trim()); }; function split_choices(str) { return str.splitrim(/
|\|/).filter(e => e !== ""); } String.prototype.stripspaces = function() { return this.replace(/\s+/g, ' '); }; function placeCaretAtEnd(el) { if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } function hide(elem) { elem.classList.add('hidden'); }; function show(elem) { elem.classList.remove('hidden'); }; function toggle(elem) { elem.classList.toggle('hidden'); };</script> <script>/** @license @nocompile Copyright (c) 2018 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt */ (function(){'use strict';var aa=new Set("annotation-xml color-profile font-face font-face-src font-face-uri font-face-format font-face-name missing-glyph".split(" "));function g(b){var a=aa.has(b);b=/^[a-z][.0-9_a-z]*-[\-.0-9_a-z]*$/.test(b);return!a&&b}function l(b){var a=b.isConnected;if(void 0!==a)return a;for(;b&&!(b.__CE_isImportDocument||b instanceof Document);)b=b.parentNode||(window.ShadowRoot&&b instanceof ShadowRoot?b.host:void 0);return!(!b||!(b.__CE_isImportDocument||b instanceof Document))} function n(b,a){for(;a&&a!==b&&!a.nextSibling;)a=a.parentNode;return a&&a!==b?a.nextSibling:null} function p(b,a,d){d=void 0===d?new Set:d;for(var c=b;c;){if(c.nodeType===Node.ELEMENT_NODE){var e=c;a(e);var f=e.localName;if("link"===f&&"import"===e.getAttribute("rel")){c=e.import;if(c instanceof Node&&!d.has(c))for(d.add(c),c=c.firstChild;c;c=c.nextSibling)p(c,a,d);c=n(b,e);continue}else if("template"===f){c=n(b,e);continue}if(e=e.__CE_shadowRoot)for(e=e.firstChild;e;e=e.nextSibling)p(e,a,d)}c=c.firstChild?c.firstChild:n(b,c)}}function r(b,a,d){b[a]=d};function u(){this.a=new Map;this.s=new Map;this.f=[];this.b=!1}function ba(b,a,d){b.a.set(a,d);b.s.set(d.constructor,d)}function v(b,a){b.b=!0;b.f.push(a)}function w(b,a){b.b&&p(a,function(a){return x(b,a)})}function x(b,a){if(b.b&&!a.__CE_patched){a.__CE_patched=!0;for(var d=0;d <script>if( customElements.get('my-input') === undefined ) { customElements.define('my-input', class MyInput extends HTMLElement { /** Wrapper around input to make it like MD text field box * @prop placholder -- to pass to input */ connectedCallback() { this.readonly = this.hasAttribute('readonly'); this.placeholder = this.getAttribute('placeholder') || "…"; this._render(); this.value = (this.getAttribute('value') || "").trim(); if(!this.readonly) { this._bind_events(); } } _render() { this.innerHTML = `

---

`; this._input = this.querySelector('input'); } _bind_events() { this._input.addEventListener('focus', e => { this.classList.add('focus'); }); this._input.addEventListener('blur', e => { this.classList.remove('focus'); }); } get value() { return this._input.value.trim(); } set value(val) { this._input.value = val; } }); }</script>

{{^Cover}}{{#Header}}

{{Header}}

{{/Header}}{{/Cover}} {{#Cover}}

{{Cover}} {{#Header}}

{{Header}}

{{/Header}}

{{/Cover}} {{#Intro}}

{{Intro}}

---

{{/Intro}}

    <div id="text" class="text">
        <p>{{Question}}</p>
  	{{#WordType}}
  	<div class="classboxes">
  		{{#Hanja}}
  		<div class="hanja">
  			{{Hanja}}
  		</div>	
  		{{/Hanja}}		
  		{{#WordType}}	
  		<div class="wordtype">
  			{{WordType}}
  		</div>
  		{{/WordType}}	
  	</div>
  	{{/WordType}}	
    </div>
    <hr>
  <div class="button">
  	{{Sound}}
  </div>
    <my-input readonly value="{{Answer}}"</my-input>
</div>
<div class="flex"></div>
{{#Explanation}}<p class="explanation">{{Explanation}}</p>{{/Explanation}}

{{#Sentence}}

{{SentenceSound}}

{{Sentence}}

{{/Sentence}} {{#Sentence2}}

{{SentenceSound2}}

{{Sentence2}}

{{/Sentence2}} {{#Sentence3}}

{{SentenceSound3}}

{{Sentence3}}

{{/Sentence3}}

{{#Reference}}

{{Reference}}

{{/Reference}}

<script>(function(){ let answered = Persistence.getItem('answer') || ""; let correct = "{{Answer}}"; let the_input = document.querySelector("my-input");

let case_sens = answered != answered.toLowerCase();

function compare() {
    if( ! answered ) return 'ground';
    let ans = answered, tru = correct;
    if(!case_sens) {
        ans = answered.toLowerCase();
        tru = correct.toLowerCase();
    }
    if( ans !== tru ) return 'missed';
    return 'correct'
}

the_input.classList.add(compare());

the_input.addEventListener('click', ev => {
    if( the_input.classList.contains('answered') ) {
        the_input.value = correct;
        the_input.classList.remove('answered');
        the_input.classList.add(compare());
    } else if ( answered ) {
        the_input.value = answered;
        the_input.classList.remove('ground', 'correct', 'missed');
        the_input.classList.add('answered');
    }
});

})();
</script>

<script src="https://kit.fontawesome.com/b92c5af0e4.js"> </script> <script> function playAudio(){ var audioDiv = document.getElementById('audio'); var audio = audioDiv.getElementsByTagName("*"); audio[0].click(); } function playSenAudio(){ var audioDiv = document.getElementById('senaudio'); var audio = audioDiv.getElementsByTagName("*"); audio[0].click(); } </script>

CSS:

html,body {
display: block;
height: 100%;
}

html, body, *, #content, #qa {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* webanki: body main.container > div#quiz > div#qa_box.card > div#qa /
/ linux-edit: body.card > div#qa /
/ linux-preview|review: body > div#qa || body.card > div#qa /
/ android: body.card > div#content > div.question || body.card > div#content > div.answer */

body > div#qa .main,
body > div#content .main {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
overflow: auto;
}

#fas fa-play-circle {

}

ul {
list-style: none;
margin: 0;
padding: 0;
}

*:focus {
outline: none;
}

.button {
float: left;
padding-right: 5px;
}

.sentence {
float: left;
width: 100%;
}

.classboxes {
margin: auto;
padding-bottom: 30px;
padding-top: 5px;
}

.wordtype {
float: left;
width: fit-content;
display: inline-block;
background-color: #1c9cdb;
color: #FFFFFF;
padding: 4px;
font-size: 14px;
}

.hanja {
float: left;
width: fit-content;
display: inline-block;
background-color: #004b66;
color: #FFFFFF;
padding: 4px;
font-size: 14px;
}

.hidden {
display: none;
}

.flex {
flex: 1 1;
}

.main {
padding: 8px;
display: flex;
flex-flow: column nowrap;
align-items: center;
background-color: var(--theme-background0);
}

hr {
width: 100%;
height: 1px;
border: none;
background-color: var(--theme-divider);
}

p {
margin: .5em 0;
}

.reference {
font-size: x-small;
}

.answer {
padding: .3ex;
}

.text .cloze.correct,
.text .cloze.missed {
border-radius: 2px;
border-bottom: none;
}

li.ground {
border-bottom: none;
}

/* material design card */

.md-card {
width: 36em; /* ~60 chars */
max-width: 100%;
min-width: 24em;
margin-bottom: 8px;
border-radius: 2px;
box-shadow: var(--md-shadow-z2);
background-color: var(--theme-background1);
}

.md-card .header {
margin: 24px 0 16px;
padding: 0 16px;
}

.md-card .cover {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio */
}

.md-card .cover img {
display: block;
position: absolute;
z-index: 0;
top: 0; bottom:0; left:0; right: 0;
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}

.md-card .cover .header {
position: absolute;
z-index: 1;
bottom: 0; left:0; right: 0;
margin: 0;
padding: 24px 16px 16px;
}

.md-card .text,
.md-card > my-input {
display: block;
margin: 16px 0;
padding: 0 16px;
}

.md-card .text img {
display: block;
margin: 8px auto;
}

/* my-cloze */

my-cloze {
display: inline;
padding: .15ex .5ex;
margin: 0 -.5ex; /* compensate */
border-bottom: 1px solid var(--theme-primary);
border-radius: 2px 2px 0 0 ;
color: var(--theme-primary-dark);
}

my-cloze.contracted {
padding-left: 0;
}

my-cloze:empty:after {
content:attr(placeholder);
color: var(--theme-placeholder);
}

my-cloze:hover {
background-color: var(--theme-hover);
}

my-cloze:focus, my-cloze.focus {
background-color: var(--theme-focus);
}

my-cloze.ground {
color: var(--theme-foreground1);
background-color: transparent;
border-color: var(--theme-secondary);
}

my-cloze.correct {
color: var(--theme-foreground1);
background-color: var(--theme-correct);
border-color: var(--theme-correct-dark);
}

my-cloze.missed {
color: var(--theme-foreground1);
background-color: var(--theme-missed);
border-color: var(--theme-missed-dark);
}

/* my-choices */

ul.md-list {
margin: 8px 0;
}

ul.md-list li {
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
min-height: 48px;
padding-right: 16px;
}

.main > my-choices {
min-width: 24em;
border: 1px solid var(--theme-divider);
border-radius: 2px;
}

ul.md-list li:hover {
background-color: var(--theme-hover);
}

ul.md-list li:focus {
background-color: var(--theme-focus);
}

ul.md-list li.correct {
background-color: var(--theme-correct);
}

ul.md-list li.missed {
background-color: var(--theme-missed);
}

ul.md-list li.disabled {
color: var(--theme-disabled);
}

/* my-chips */

ul.md-chips {
display: flex;
flex-flow: row wrap;
justify-content: center;
min-width: 24em; /* ~40 chars /
max-width: 36em; / ~60 chars */
}

ul.md-chips li {
display: flex;
align-items: center;
margin: 4px;
padding: 0 12px;
height: 32px;
border-radius: 16px;
background-color: var(--theme-fieldbox);
box-shadow: var(--md-shadow-z1);
}

ul.md-chips li[tabindex]:active {
background-color: var(--theme-active);
box-shadow: var(--md-shadow-z8);
}

ul.md-chips li:hover {
background-color: var(--theme-fieldbox-hover);
}

ul.md-chips li:focus {
background-color: var(--theme-focus);
}

ul.md-chips li label,
ul.md-chips li i {
font-size: 1rem;
line-height: 1rem;
color: var(--theme-foreground1);
font-style: normal;
}

.md-control {
width: 40px;
height: 40px;
/* 16px from left to icon, sum up to 72px */
margin-left: 5px;
margin-right: 27px;
}

.md-control__outline {
margin: 11px;
height: 18px;
width: 18px;
border: 2px solid var(--theme-primary);
}

.md-radio .md-control__outline {
border-radius: 50%;
}

.md-check .md-control__outline {
border-radius: 2px;
}

.md-control__inline {
display: none;
}

.selected .md-control__inline {
display: block;
margin: 2px;
width: 10px;
height: 10px;
background-color: var(--theme-primary);
}

.md-radio .md-control__inline {
border-radius: 50%;
}

.md-check .md-control__inline {
border-radius: 2px;
}

.disabled .md-control__outline,
[readonly] .md-control__outline {
border-color: var(--theme-disabled);
}

.ground .md-control__outline {
border-color: var(--theme-secondary);
}
.ground.selected .md-control__inline {
background-color: var(--theme-secondary);
}

.correct .md-control__outline {
border-color: var(--theme-correct-dark);
}
.correct.selected .md-control__inline {
background-color: var(--theme-correct-dark);
}

.missed .md-control__outline {
border-color: var(--theme-missed-dark);
}
.missed.selected .md-control__inline {
background-color: var(--theme-missed-dark);
}

/* my-input */

.md-textbox {
flex: 0 0 36px;
height: 36px;
margin: 8px auto;
background-color: var(--theme-fieldbox);
border-radius: 4px;
padding: 8px 16px;
position: relative;
overflow: hidden;
}

.md-textbox hr {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0;
border: none;
margin: 0;
border-bottom: 2px solid var(--theme-primary);
}

.md-textbox input {
width: 20em; /* Betäubungsmittel-Verschreibungsverordnung */
margin: 0;
padding: 0;
border: none;
font-size: 1rem;
font-weight: 400;
background: transparent;
}

.md-textbox
{
background-color: var(--theme-fieldbox);
}
.md-textbox:hover
{
background-color: var(--theme-fieldbox-hover);
}

.focus .md-textbox,
.focus .md-textbox hr
{
background-color: var(--theme-focus);
}

.ground .md-textbox,
[readonly].ground .md-textbox hr {
border-color: var(--theme-secondary);
}

[readonly] .md-textbox hr
{
border-color: var(--theme-divider);
}

.correct .md-textbox,
.correct .md-textbox hr
{
background-color: var(--theme-correct);
border-color: var(--theme-correct-dark);
}

.missed .md-textbox,
.missed .md-textbox hr
{
background-color: var(--theme-missed);
border-color: var(--theme-missed-dark);
}

.cover .header {
background-image: linear-gradient(to bottom, transparent 0%, hsla(199, 100%, 10%, .6) 24px, hsla(199, 100%, 10%, .95) 100%);
color: white;
}

input::-webkit-input-placeholder {
color: var(--theme-placeholder);
}

/* material design typography */

body {
font-family: Roboto, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
color: var(--theme-foreground1);
}

.md-headline6 {
font-size: 1.25rem;
line-height: 2rem;
font-weight: 500;
letter-spacing: 0.0125em;
text-decoration: inherit;
text-transform: inherit; }

.md-body1 {
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
letter-spacing: 0.03125em;
text-decoration: inherit;
text-transform: inherit; }

.md-body2 {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.01786em;
text-decoration: inherit;
text-transform: inherit; }

.md-caption {
font-size: 0.75rem;
line-height: 1.25rem;
font-weight: 400;
letter-spacing: 0.03333em;
text-decoration: inherit;
text-transform: inherit; }

:root {
--theme-primary: hsl(199, 100%, 50%);
--theme-primary-dark: hsl(199, 100%, 20%);
--theme-secondary: hsl(36, 100%, 50%);

--theme-correct: hsl(120, 80%, 80%);
--theme-correct-dark: hsl(120, 50%, 50%);
--theme-missed: hsl(50, 100%, 80%);
--theme-missed-dark: hsl(50, 50%, 50%);

--theme-background0: hsl(199, 100%, 95%);
--theme-background1: hsl(0, 0%, 98%);
--theme-foreground1: rgba(0, 0, 0, .87);
--theme-foreground2: rgba(0, 0, 0, .54);
--theme-divider: hsla(199, 100%, 20%, .12);
--theme-disabled: hsla(199, 100%, 20%, .26);
--theme-placeholder: hsla(199, 100%, 20%, .38);

--state-hover: .04;
--state-selected: .08;
--state-focus: .12;
--state-activated: .12;

--theme-fieldbox: rgba(0, 0, 0, .05);
--theme-fieldbox-hover: rgba(0, 0, 0, .09);
--theme-hover: rgba(0, 0, 0, var(--state-hover));
--theme-selected: rgba(0, 0, 0, var(--state-selected));
--theme-focus: rgba(0, 0, 0, var(--state-focus));
--theme-active: rgba(0,0,0, var(--state-activated));

--md-shadow-z1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
--md-shadow-z2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
--md-shadow-z8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

}

this avoids situation like entering into nowhere

The answers only start shuffling into a random order once there are 4 or more options. When there are only 2 or 3 options, they remain in the same order.

it should adjust class when value is set initially

Useful for "transform the sentence"

Move everything into media collection to avoid trash in cards templates.

When switching cloze, choices should be reset to already selected option.

To pair set of objects (sentences, words, audios) with some labels (words or categories).

Also, adopt use case with "sort stuff into two bins".

to avoid messing up with html inside fields

some environments are still weird and skewed.

need to enforce fullscreen harder

long links should be auto-shortened, or markdown link syntax supported

And announce it on github.

Make another model with radio-choices.

Hello,

Im a newbie newbie to Anki and even more its coding capabilities. This interactive add-on, however, seems to be the future of flashcards; it's just so amazing. I've had some trouble trying to get this to work for me, though.

When I first download it and run it to Anki, I opened the practice demo to get an understanding of the layout. The first two cards work without a problem. However, it's the 3rd card: Interactive Cloze that giving me issues.

Here is a screenshot of the warning:

Not knowing what to do, I located the code inside of Anki and just deleted it. Then I ran into the same problem; except this time for the back template. I deleted it from the back template as well.

I ran into another problem after doing this:

The front template is asking something about the HTML and the back template seems to be working fine.

I'm using Anki 2.1. I read in the folder manual about ensuring that PythonPath has the Anki sources; I don't know what this means.

Any help would be much appreciated,

Thanks.

need to auto scroll down upon cloze activation

This error is shown by the newest version of anki on some of the interactive cards:
Found '⁨{{placeholder: String, editable: boolean}}⁩', but there is no field called '⁨ boolean⁩'
To solve it we need to replace this line on both the front and back templates:
* @param {{placeholder: String, editable: boolean}} params
with these 2 lines:

* @param {placeholder: String} params
* @param {editable: boolean} params

This solution was found by a user called "lydia" on another website

Either in wiki, or in md, or at ghpages.

To hold much of text without overloading visual.

I'm coming from Memrise, and this plugin makes switching to Anki very appealing, but what is keeping me from switching to Anki is it using the honour system, as in you have to tell the program how you did. The problem with that is that I don't trust myself to be honest, and always go easy or hard on myself.

Is it possible to make the plugin choose for you based on the answers you input?

OS: Windows 10 x64
Anki verison: 2.1.14
Additional addon: Auto Markdown

It actually worked the first time I started up the .apkg, but now it stopped working.