昆明做商城网站多少钱,产品做国外网站有哪些,做导航网站有发展吗,注册公司网站怎么收费在创建一个支持切换阅读模式和答题模式的Anki问答题模板中#xff0c;我创建了一个支持切换阅读模式和答题模式的问答题模板#xff0c;该文最终利用JavaScript将Anki输出的向下箭头删除#xff0c;并插入自定义的提示语。经过进一步测试#xff0c;发现实现上述功能完全不…在创建一个支持切换阅读模式和答题模式的Anki问答题模板中我创建了一个支持切换阅读模式和答题模式的问答题模板该文最终利用JavaScript将Anki输出的向下箭头删除并插入自定义的提示语。经过进一步测试发现实现上述功能完全不需要使用JavaScript仅使用CSS即可以实现。
Anki产生向下箭头的那行代码如下
format!({provided}brspan idtypearrowdarr;/spanbr{expected})
从上面的模板字符串可知向下箭头所在span元素的id为typearrow在这个元素后面跟着一个br元素后面紧接着输出的内容是用户输入的答案存在的错误可以通过继续查阅源代码搞清楚这些内容包含在什么HTML元素中也可以在背面内容模板中插入以下JavaScript让系统提示
var typearrow document.getElementById(typearrow);
alert(typearrow.nextSibling.nextSibling.tagName);
运行上述代码可知br元素后面紧跟着的是span元素。不过在CSS选择器中可以用“”定位到紧邻的兄弟结点也可以用“*”通配符匹配任何HTML节点因此如果我们只想在br元素后面紧跟着的元素前面添加提示实际上无需搞清楚用户输入的答案存在的错误包含在哪个元素中只需用CSS选择器“#typearrow br *”就可以定位到那个元素再加上伪元素选择器“::before”就可以插入提示信息了。
利用上面的思路改造可切换答题模式与阅读模式的问答题模板后从下面的源代码可以看出正面内容模板和背面内容模板都更为简洁特别是背面内容模板其中的JavaScript代码完全删除了理论上运行效率也更高。
正面内容模板
script
// v1.1.8 - https://github.com/SimonLammer/anki-persistence/blob/584396fea9dea0921011671a47a0fdda19265e62/script.js
if(void 0window.Persistence){var egithub.com/SimonLammer/anki-persistence/,t_default;if(window.Persistence_sessionStoragefunction(){var i!1;try{objecttypeof window.sessionStorage(i!0,this.clearfunction(){for(var t0;tsessionStorage.length;t){var isessionStorage.key(t);0i.indexOf(e)(sessionStorage.removeItem(i),t--)}},this.setItemfunction(i,n){void 0n(ni,it),sessionStorage.setItem(ei,JSON.stringify(n))},this.getItemfunction(i){return void 0i(it),JSON.parse(sessionStorage.getItem(ei))},this.removeItemfunction(i){void 0i(it),sessionStorage.removeItem(ei)},this.getAllKeysfunction(){for(var t[],iObject.keys(sessionStorage),n0;ni.length;n){var si[n];0s.indexOf(e)t.push(s.substring(e.length,s.length))}return t.sort()})}catch(n){}this.isAvailablefunction(){return i}},window.Persistence_windowKeyfunction(i){var nwindow[i],s!1;objecttypeof n(s!0,this.clearfunction(){n[e]{}},this.setItemfunction(i,s){void 0s(si,it),n[e][i]s},this.getItemfunction(i){return void 0i(it),void 0n[e][i]?null:n[e][i]},this.removeItemfunction(i){void 0i(it),delete n[e][i]},this.getAllKeysfunction(){return Object.keys(n[e])},void 0n[e]this.clear()),this.isAvailablefunction(){return s}},window.Persistencenew Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistencenew Persistence_windowKey(py)),!Persistence.isAvailable()){var iwindow.location.toString().indexOf(title),nwindow.location.toString().indexOf(main,i);i0n0n-i10(window.Persistencenew Persistence_windowKey(qt))}}/script
scriptvar model Persistence.getItem();if (model null) {model { model:answer,};Persistence.setItem(model);}else{var back document.getElementById(back);var btnToggle document.getElementById(btnToggle);var answer document.getElementById(answer);if (model.model answer){btnToggle.value 答题模式;back.style display:none;answer.style display:bolck;}else{btnToggle.value 阅读模式;back.style display:bolck;answer.style display:none;}}function toggleModel(){var btnToggle event.currentTarget;var back document.getElementById(back);var answer document.getElementById(answer);if (model.model answer){model.model read;btnToggle.value 阅读模式;back.styledisplay:bolck;answer.style display:none;}else{model.model answer;btnToggle.value 答题模式;back.styledisplay:none;answer.style display:block;}Persistence.setItem(model);}
/script
diva说明/aq当前模式如下方按钮所示。点击下方按钮可在阅读模式和答题模式之间切换。/q/div
div aligncenter
input idbtnToggle typebutton onclicktoggleModel() value答题模式/input/divhr classseparator /
div classh1 xcolor xleftspan⛳问题/span span idtime/span
/div
div classh2 xleft alignleft{{edit:问题}}/div
hr classseparator /div classslidediv classh1 ycolor yleftspan 口诀/span/divdiv classh3 yleft;alignleft{{edit:口诀}}/div
/div
hr classseparator /div idanswer classh1 ycolor xleft styledisplay:blockspan classyimg✍️ 回答/spanbrbr{{type:答案}} hr classseparator /
/divdiv idback styledisplay:nonediv classh1 ycolor yleftspan正确答案/span /divdiv classnormal{{edit:答案}}divhr classseparator /div classh1 ycolor xleft md-contentspan⚓备注/span/divdiv classnormal{{edit:备注}}div
/div背面内容模板
div classh1 xcolor xleftspan⛳ 问题/spanspan idtime/span
/div
div classh2 xleft alignleft{{edit:问题}}/div
hr classseparator /div classslidediv classh1 ycolor yleftspan 口诀/span/divdiv classh3 yleft alignleft{{edit:口诀}}/div
/div
hr classseparator /
div classslide idslide1div classh1 ycolor yleftspan答案对比/spandiv class notea说明/a没有另外显示正确答案时表示你的答案完全正确。/div/divdiv classh1 yleft alignleft {{FrontSide:type:答案}}/div
/div
hr classseparator /
div classh1 ycolor xleft md-contentspan⚓备注/span
/div
div classnormal{{edit:备注}}div样式文件只贴出在Anki自带的问答题模板基础上后来添加的内容其中值得注意的地方均有注释注明
.color1,q{font-weight:bold;color:red;
}
.color2,a,a:link,a:visited,a:hover,a:active{font-weight:bold;color:blue;text-decoration:none;
}
.color3,i{font-weight:bold;color:rgb(230,12,237);
}
.separator{border:none;border-top-width:0.3em;border-top-style:solid;border-top-color:#aaa;margin:1.2em 0 1.2em 0;
}
.normal{text-indent:2em;font: 22px/22px Aa奶糖油画体,干就完事了简;line-height:1.5em;
}
.h3{font-family:Aa奇思胖丫儿;color:green;background:yellow;
}
b{font-size:1.2em;-webkit-text-stroke:0.01em #0f0;
}q::before,q::after{content:;
}
#btnToggle {background-color: #4CAF50; /* Green */border: none;color: yellow;padding: 0.3em;text-align: center;text-decoration: none;display: inline-block;font-size: 1.2em;border-radius:0.5em;box-shadow: 0.1em 0.15em teal;
}
/*拼写正确时的文字样式*/
.typeGood{background-color:#0f0; /*transparent透明*/
}
/*拼写错误时的文字样式*/
/*没有拼写出来的文字样式*/
.typeBad, .typeMissed{background-color:#ff0;color:red;font-weight:bold;
}code#typeans {font-family: Aa虎头虎脑;font-weight:bold;
}
.note{text-indent:2em;margin:1em 0em;
}
/*在用户输入的答案前添加提示*/
code#typeans::before {content:你的答案;color:#33c;
}
/*隐藏anki生成的箭头该箭头包含在一个id为typearrow的span中*/
#typearrow{display:none;
}
/*跳过向下箭头元素及其后面的br元素添加提示。当然我们可以利用
JavaScript查出那个元素的标签名是span*/
#typearrow br *::before{content:正确答案;color:#33c;-webkit-text-stroke:0em;
}
这篇文章本质上是上一篇文章的延续但上一篇文章已经补充过多次为方便阅读在此另写一文。下面放一张背面截图
