qwiglydee / anki-interactive Goto Github PK
View Code? Open in Web Editor NEW[ABANDONED] Interactive Cards for Anki
License: GNU General Public License v3.0
[ABANDONED] Interactive Cards for Anki
License: GNU General Public License v3.0
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}}<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>{{/Header}}{{/Cover}} {{#Cover}}{{Header}}
{{Cover}} {{#Header}}{{/Cover}} {{#Intro}}{{/Header}}{{Header}}
{{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}}
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}}<script>(function(){ let answered = Persistence.getItem('answer') || ""; let correct = "{{Answer}}"; let the_input = document.querySelector("my-input");{{/Header}}{{/Cover}} {{#Cover}}{{Header}}
{{Cover}} {{#Header}}{{/Cover}} {{#Intro}}{{/Header}}{{Header}}
{{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}}
{{#Reference}}{{/Reference}}{{/Sentence}} {{#Sentence2}}{{SentenceSound}}{{Sentence}}{{/Sentence2}} {{#Sentence3}}{{SentenceSound2}}{{Sentence2}}{{/Sentence3}}{{SentenceSound3}}{{Sentence3}}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 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>
</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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.