最近開始使用anki了，想在零碎時間背點東西。找了很多填空題代碼，都沒有看到合適的，最終決定自己摸索著改了一版。目前測試是Android和win都可正常使用。
模板題型：填空題（帶劃線）
主要功能：空格處劃線，并每個空格可以點擊出現(xiàn)答案。
主要樣式：

使用了兩個字段：內(nèi)容和相關知識。
內(nèi)容就是所需背誦的知識點內(nèi)容，相關知識可以填入擴展知識。

1、正面

2、背面

根據(jù)本人的使用需求是把全內(nèi)容顯示設置成了正面，填空劃線設置成了背面，這樣可以先背再檢驗是否已記住主要內(nèi)容，如有需要可以正背面代碼互換。
相關知識在正面采用的是全顯示的方式，背面可以選擇點擊相關知識出現(xiàn)內(nèi)容，根據(jù)情況選擇是否需要二次背誦。
背面使用的是 anki填空題點一個顯示一個，能夠?qū)崿F(xiàn)點擊出現(xiàn)一個一個空驗證。

代碼：
1、正面（全顯示，挖空部分顯示紅色并有下劃線）

<div class="h2 xleft" id="div0" style="display:none; ">{{內(nèi)容}}</div><div class="h2 xleft" id="div1" style="display:block;">{{內(nèi)容}}</div>{{#相關知識}} <br><div class="slide"><div class="h1 zcolor zleft"><span class="zimg"><height="24" width="24" /></span>相關知識：</div><div class="h2 zleft">{{相關知識}}</div></div> {{/相關知識}}<input class="btn" type="button" onclick="showAndHidden();" value="" style="display:none;" /><div style="display:none">{{cloze:內(nèi)容}}</div><script type="text/javascript">var arr = new Array,arr1 = new Array,arr2 = new Array;/[].forEach.call(document.querySelectorAll('#div0'),function(V0) {V0.innerHTML = V0.innerHTML.replace(/\{\{[c]\d+\:\:([^\{|\}]+?)\}\}/g,function(cloze) {var div30='<span id="div3" οnclick="toggle(this)" class="cloze" cloze="@CLOZE@" cloze1="@CLOZE@1" cloze2="@CLOZE@2" wor="wor2">@......@</span>'; var dd1=cloze.indexOf("::"),dd2=cloze.lastIndexOf("::"),dd3=cloze.length,cc=0,cc1=0,cc2=0;var word = cloze.substring(dd1+2, dd3-2);var word1,word2;switch(dd2-dd1){case 0: word1=word;word2="<uu>　　</uu>"; break;case 1: word1=word;word2="<uu>　　</uu>"; break;case 2: word1=word;word2="<uu>　　</uu>"; break;default:if(dd3-dd2==4){word1=word;word2="<uu>&emsp;&emsp;</uu>";}else{word1=cloze.substring(dd1+2, dd2);word2="<uu>&nbsp;&nbsp;"+cloze.substring(dd2+2, dd3-2)+"&nbsp;&nbsp;</uu>";}}cc=arr.push(word)-1; cc1=arr1.push(word1)-1;cc2=arr2.push(word2)-1;return div30.replace( '@CLOZE@',cc).replace( '@CLOZE@1',cc1).replace( '@CLOZE@2',cc2).replace( '@......@', word2);}); }); //[].forEach.call(document.querySelectorAll('#div1'),function(V2) {V2.innerHTML = V2.innerHTML.replace(/(\{\{[c]\d+\:\:[^\{|\}]+?)\:\:[^\{|\}]*?\}\}/g,"$1}}").replace(/\{\{[c]\d+\:\:([^\{|\}]+?)\}\}/g,'<span class="cloze">'+"$1"+'</span>');});////function toggle(id) {if (id.getAttribute('wor')=="wor2") {id.innerHTML = arr1[id.getAttribute('cloze1')]; id.setAttribute('wor',"wor1");return;}if (id.getAttribute('wor')=="wor1"){id.innerHTML = arr2[id.getAttribute('cloze2')]; id.setAttribute('wor',"wor2");return;}} ///function showAndHidden(){var div0=document.getElementById("div0");var div1=document.getElementById("div1");if(div0.style.display=='block') {div0.style.display='none';}else {div0.style.display='block';}if(div1.style.display=='none') {div1.style.display='block';}else {div1.style.display='none';}}</script>

2、背面

<div class="h2 xleft" id="div0" style="display:block;">{{內(nèi)容}}</div><div class="h2 xleft" id="div1" style="display:none; ">{{內(nèi)容}}</div>{{#相關知識}} <br><div class="slide"><div class="h1 zcolor zleft"><span class="zimg"><height="24" width="24" /></span></div><div class="h2 zleft">{{hint:相關知識}}</div></div> {{/相關知識}}<input class="btn" type="button" onclick="showAndHidden();" value="" style="display:none;" /><div style="display:none">{{cloze:內(nèi)容}}</div><script type="text/javascript">var arr = new Array,arr1 = new Array,arr2 = new Array;/[].forEach.call(document.querySelectorAll('#div0'),function(V0) {V0.innerHTML = V0.innerHTML.replace(/\{\{[c]\d+\:\:([^\{|\}]+?)\}\}/g,function(cloze) {var div30='<span id="div3" οnclick="toggle(this)" class="cloze" cloze="@CLOZE@" cloze1="@CLOZE@1" cloze2="@CLOZE@2" wor="wor2">@......@</span>'; var dd1=cloze.indexOf("::"),dd2=cloze.lastIndexOf("::"),dd3=cloze.length,cc=0,cc1=0,cc2=0;var word = cloze.substring(dd1+2, dd3-2);var word1,word2;switch(dd2-dd1){case 0: word1=word;word2="<uu>　　</uu>"; break;case 1: word1=word;word2="<uu>　　</uu>"; break;case 2: word1=word;word2="<uu>　　</uu>"; break;default:if(dd3-dd2==4){word1=word;word2="<uu>&emsp;&emsp;</uu>";}else{word1=cloze.substring(dd1+2, dd2);word2="<uu>&nbsp;&nbsp;"+cloze.substring(dd2+2, dd3-2)+"&nbsp;&nbsp;</uu>";}}cc=arr.push(word)-1; cc1=arr1.push(word1)-1;cc2=arr2.push(word2)-1;return div30.replace( '@CLOZE@',cc).replace( '@CLOZE@1',cc1).replace( '@CLOZE@2',cc2).replace( '@......@', word2);}); }); //[].forEach.call(document.querySelectorAll('#div1'),function(V2) {V2.innerHTML = V2.innerHTML.replace(/(\{\{[c]\d+\:\:[^\{|\}]+?)\:\:[^\{|\}]*?\}\}/g,"$1}}").replace(/\{\{[c]\d+\:\:([^\{|\}]+?)\}\}/g,'<span class="cloze">'+"$1"+'</span>');});////function toggle(id) {if (id.getAttribute('wor')=="wor2") {id.innerHTML = arr1[id.getAttribute('cloze1')]; id.setAttribute('wor',"wor1");return;}if (id.getAttribute('wor')=="wor1"){id.innerHTML = arr2[id.getAttribute('cloze2')]; id.setAttribute('wor',"wor2");return;}} /function showAndHidden(){var div0=document.getElementById("div0");var div1=document.getElementById("div1");if(div0.style.display=='block') {div0.style.display='none';}else {div0.style.display='block';}if(div1.style.display=='none') {div1.style.display='block';}else {div1.style.display='none';}}</script>

3、 CSS

/* ----------各種樣式---------- */body { background-color: #fff; color: black; } .card {font: 20px/30px yh;background-color:#fff; }.cloze {color: #ec6c4f;#font-weight: bold;border-bottom: 1px solid #ec6c4f;-webkit-animation: cloze 0.4s 0s;-webkit-animation-fill-mode: forwards; } .h1 { font: 22px/22px yh; padding: 0.3em 0em 0.3em 0.5em; } .h2 { font: 20px/30px yh; padding: 0.3em 0em 0.3em 0.5em; }.ximg { background: url(_x-day.svg); background-size: 100%; background-repeat: no-repeat; background-position: center; } .yimg { background: url(_y-day.svg); background-size: 100%; background-repeat: no-repeat; background-position: center; } #.zimg { background: url(_z-day.svg); background-size: 100%; background-repeat: no-repeat; background-position: center; }.btn {opacity: 0.8;right: 10px;bottom: 10px;height: 70px;width: 70px;border: none;background: url(_switch.png);background-size: 100%;position: fixed; }.btn:active { opacity: 0.9; } .hint { color: #333; }/* ---------- 其他調(diào)整 ---------- */a { color: #666; } img { max-width: 100%; vertical-align: middle; }.chrome img { max-width: 100%; vertical-align: middle; } ul,ol { margin-top: 0em; } li { margin-left: -0.5em; } i { font-family: palatino; padding: 0 3px 0 0; } u { text-decoration: none; background-color: #ffff75; border-bottom: 2px solid #ec6c4f; } uu { border-bottom: 1px solid #ec6c4f; } hr { height: 1px; width: 100%; display: block; border: 0px solid #fff; vertical-align: middle; margin:5px 0px 10px 0px; background-color: #ccc;} #time { font-family: yh; float: right; }

總結(jié)

以上是生活随笔為你收集整理的anki填空题卡片模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。