一、Anki是什么？

Anki是一個(gè)輔助記憶軟件，它非常利于復(fù)習(xí)記憶，它可以按照艾賓浩斯遺忘曲線，給你安排合理的復(fù)習(xí)頻率，就像你使用背單詞軟件時(shí)的操作一樣。
一次記憶一個(gè)卡片上的一個(gè)小知識(shí)點(diǎn)，記得牢，而且能夠充分利用碎片時(shí)間。容易忘記、重復(fù)復(fù)習(xí)過(guò)于熟悉的，這些小問(wèn)題都可以解決。

二、Anki如何下載與安裝？

下載與安裝很簡(jiǎn)單，傻瓜式安裝，就是一直點(diǎn)下一步即可。
Anki中國(guó)地址：http://www.ankichina.net/ 或者這個(gè)網(wǎng)址：https://apps.ankiweb.net/
往下看有各個(gè)端的下載鏈接。

三、Anki怎么用？

這個(gè)我有點(diǎn)不好意思說(shuō)（-_-因?yàn)槲乙彩莿倓傆玫?，而且還是被逼著使用一下。）。步驟如下：

• 1、創(chuàng)建一個(gè)記憶庫(kù)
  記憶庫(kù)就相當(dāng)與我們的一本筆記，筆記里面可以寫很多內(nèi)容。可以創(chuàng)建多個(gè)記憶庫(kù)，記憶庫(kù)就相當(dāng)于筆記分類.
• 2、添加卡片
  卡片就相對(duì)與我們的筆記(記憶庫(kù))內(nèi)容，一個(gè)卡片相當(dāng)于一個(gè)知識(shí)點(diǎn)，可以把卡片當(dāng)成一本筆記本的一頁(yè)筆記內(nèi)容
• 3、卡片內(nèi)容
  卡片默認(rèn)有正反面，正面就是問(wèn)題，反面是隱藏的存放答案。當(dāng)我們學(xué)習(xí)的時(shí)候可以顯示答案看我們是否作對(duì)題目
• 4、開始學(xué)習(xí)
  卡片制成(也就是把卡片添加進(jìn)記憶庫(kù))之后就可以開始學(xué)習(xí)了。
• 5、卡片的級(jí)別
  1、生疏/錯(cuò)誤：你一看到就知道自己沒(méi)見過(guò)或者見過(guò)也忘了。
  2、困難/模糊：你用力想能記起來(lái)一點(diǎn)，但不完全。
  3、猶豫/想起：你仔細(xì)想，還是能夠回憶出來(lái)。
  4、順利/正確：沒(méi)什么難度，基本熟悉了。

這樣就算是入門Anki使用方法了

四、Anki怎么制作選擇題卡片

本文重點(diǎn)，要想弄好看的模板得需要寫點(diǎn)HTML代碼，如果你不會(huì)寫代碼也沒(méi)關(guān)系，可以用我寫好的代碼。
而你只需要自己改皮膚即可，改皮膚只需要改幾行代碼這樣子。先看看成品

show1.png

正確時(shí)顯示如下

show2.png

錯(cuò)誤時(shí)顯示如下

show3.png

• 1、修改基礎(chǔ)卡片類型的字段
  操作步驟如下圖

  
  
  1.png
  
  
  2.png
  
  
  3.png

• 2、添加問(wèn)題與答案解析
  如下圖，我隨便網(wǎng)上找的題目

  
  
  4.png

• 3、編輯卡片

  
  
  5.png

都是空白的，下面開始寫代碼

• 4、修改卡片的正反面模板

  
  
  6.png

寫完代碼之后就顯示如上圖所示。下面給出完整的代碼：

• 5、正面模板的代碼
  把它全部復(fù)制到正面模板的位置。

<div id="classify" class="classify">單選題：</div>
<div class="text">{{Question}}</div>
{{#Options}}
<ol id="optionList" class="options"></ol>
<div id="options" style="display:none">{{Options}}</div>
<div id="answer" style="display:none">{{text:Answer}}</div>
<div id="checkAns" ></div>
<div id="countDown" ></div>
{{/Options}}
<style>
    #countDown{
        position: absolute;
        top:50%;
        left: 30%;
        font-size: 25px;
    }
</style>
<script>
    initOptions();
    // 倒計(jì)時(shí)的結(jié)束時(shí)間，改成你自己的
    var endTime="2020/08/29 00:00:00";
    countDown(endTime);
    function countDown(endTime) {
        var nowtime = new Date();
        var endtime = new Date(endTime);
        var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
        var d = parseInt(lefttime / (24*60*60))
        var h = parseInt(lefttime / (60 * 60) % 24);
        var m = parseInt(lefttime / 60 % 60);
        var s = parseInt(lefttime % 60);
        d = addZero(d)
        h = addZero(h);
        m = addZero(m);
        s = addZero(s);
        document.getElementById("countDown").innerHTML = `考試倒計(jì)時(shí)  $u0z1t8os天 ${h} 時(shí) ${m} 分 ${s} 秒`;
        //document.getElementById("countDown").innerHTML = `考試倒計(jì)時(shí)  $u0z1t8os天 `;
        if (lefttime <= 0) {
            document.getElementById("countDown").innerHTML = "考試已結(jié)束";
            return;
        }
        setTimeout(function(){countDown(endTime)}, 1000);
    }
    function addZero(i) {
        return i < 10 ? "0" + i: i + "";
    }
</script>

可能剛放進(jìn)去的時(shí)候會(huì)報(bào)錯(cuò)不用理會(huì)，因?yàn)槲覀冞€沒(méi)有填寫中間的分享格式刷代碼

• 6、中間部分，格式刷-卡片格式共享 代碼

.card{
    font-family:Arial;
    font-size:22px;
    text-align:left;
    color:#fff;
    background-color:#222;
}
<style>
    *{
        text-align:left;
    }
    div{
        margin:5px auto;
    }
    .classify{
    }
    .text{
        text-align:left;
    }
    .cloze {
        font-weight:bold;
        color:#a6e22e;

    }
    .cloze_line{
        font-weight:bold;
        color:#a6e22e;
        text-decoration: underline;
    }
    .wrong {
        font-weight:bold;
        color:#f92672;
        text-decoration:line-through;
    }
    .options {
        list-style:upper-latin;
    }
    .options * {
        cursor:pointer;
    }
    .options *:hover {
        font-weight:bold;
        color: #a6e22e;
    }

    .options input[name="options"] {
        display:inline;
    }
    .sformat{
        display: inline-block;
        margin-left: 100px;
    }
    #performance {
        text-align:center;
        margin-top:10px;
    }
    .analyze{
        margin-top:15px;
        font-size:20px;
        text-align:left;
    }
</style>
<script>
    if (!window.gData) {
        window.gData = {
            clickedValues: [],
            total: 0,
            correct: 0,
            score: 0,
            sum: 0,
            list: '',
            correctanswer: [],
            rsltanswer: []
        }
    }
    var gData = window.gData;
    // 顯示選項(xiàng)
    function initOptions() {
        var optionList = document.getElementById("optionList"),
            classify = document.getElementById("classify"),
            options = document.getElementById("options"),
            answer = document.getElementById("answer");
        var correctanswer = answer.innerText.toUpperCase().match(/[A-Fa-f]/g);
        correctanswer.length > 1 && (classify.innerText = "多選題：");
        gData.correctanswer=correctanswer;
        options = options.innerHTML,
            options = options.replace(/<\/?div>/g, "\n"),
            options = options.replace(/\n+/g, "\n"),
            options = options.replace(/<br.*?>/g, "\n"),
            options = options.replace(/^\n/, ""),
            options = options.replace(/\n$/, ""),
            options = options.split(/(\n|\r\n)/g).filter(function(e) {
                return "\n" !== e && "\r\n" !== e && "" !== e
            }) || [];
        var indexs = [];// 存隨機(jī)數(shù)的
        gData.rsltanswer=[];//重置，此參數(shù)為亂序后的正確答案
        gData.clickedValues=[];
        for(var key=0;key<options.length;key++){
            var randomNum=getRandomNum(indexs,options.length); //隨機(jī)
            // var randomNum=key; //不要隨機(jī)了
            var li ='';
            if(correctanswer.indexOf(String.fromCharCode(randomNum + 65)) != -1){
                gData.rsltanswer.push(String.fromCharCode(key + 65));
                li=getLiElement(options[randomNum],String.fromCharCode(key + 65),"optionTrue")
            }else{
                li=getLiElement(options[randomNum],String.fromCharCode(key + 65),"optionFalse")
            }
            optionList.appendChild(li);
        }
        gData.list=optionList.innerHTML;
        gData.total++;
    }

    // 獲取隨機(jī)數(shù)，亂序答案時(shí)需要
    function getRandomNum(indexs,number) {
        var num;
        do {
            num = Math.random() * number;
            num = Math.floor(num);
            if (indexs.join().indexOf(num.toString()) == -1) {
                indexs.push(num);
                break;
            }
        } while (true)
        return num;
    }

    // 點(diǎn)擊選項(xiàng)事件
    function choice(li){
        var key = li.getAttribute("id");
        var input = document.getElementById("input"+key);
        var inputType = input.getAttribute("type");
        input.checked=!input.checked;
        if("checkbox" == inputType){
            let delIndex =gData.clickedValues.indexOf(key);
            if(delIndex != -1){
                gData.clickedValues.splice(delIndex,1);
            }else{
                gData.clickedValues.push(key);
            }
        }else{
            gData.clickedValues=[];
            gData.clickedValues.push(key);
        }
    }

    // 創(chuàng)建li選項(xiàng)，key=第幾個(gè)答案選項(xiàng)
    function getLiElement(value,key,liClass) {
        var liElement = document.createElement("li"),
            inputElement = document.createElement("input"),
            labelElement = document.createElement("label");
        inputElement.setAttribute("type", 1 === gData.correctanswer.length ? "radio": "checkbox");
        inputElement.setAttribute("name", "options");
        inputElement.setAttribute("id", "input"+key);
        labelElement.innerHTML=value;
        liElement.appendChild(inputElement);
        liElement.appendChild(labelElement);
        liElement.setAttribute("class", liClass);
        liElement.setAttribute("id", key);
        liElement.setAttribute("onclick", "choice(this)");
        return liElement;
    }
    function checkAnswer(arr1,arr2) {
        if(arr1.length != arr2.length)return false;
        if(arr2.sort().toString() != arr1.sort().toString()) return false;
        return true;
    }
</script>

講道理，填完這個(gè)正面模板那邊應(yīng)該是不報(bào)錯(cuò)了。

• 7、反面模板的代碼

<div id="classify" class="classify">單選題：</div>
<div class="text">{{Question}}</div>
{{#Options}}
<ol class="options" id="optionList"></ol>
<div id="options" style="display:none">{{Options}}</div>
<div id="answer" style="display:none">{{text:Answer}}</div>
<div>
    <span id="result" class="cloze sformat"></span>
    <span  class="cloze sformat">正確答案：<b id="key" ></b></span>
    <span class="cloze sformat">你的答案：<b id="yourkey"></b></span>
</div>
{{/Options}}
{{#Analyze}}
<hr>
<div id="performance"> 正確率：100%</div><br>
<div class="analyze">解析:{{Analyze}}</div>
<div id="listText"></div>
{{/Analyze}}
<script>
    var classify = document.getElementById("classify"),
        performance = document.getElementById("performance"),
        result = document.getElementById("result"),
        key = document.getElementById("key"),
        yourkey = document.getElementById("yourkey"),
        optionOl = document.getElementById("optionList");
    gData.correctanswer.length > 1 && (classify.innerText = "多選題：");
    optionOl.innerHTML = gData.list;
    if(checkAnswer(gData.clickedValues,gData.rsltanswer)){
        gData.correct++;
        result.innerHTML="回答正確?。?！";
    }else{
        yourkey.classList.add("wrong");
        result.classList.add("wrong");
        result.innerHTML="很遺憾，回答錯(cuò)誤";
    }
    key.innerHTML = gData.rsltanswer.sort().toString();
    yourkey.innerHTML = gData.clickedValues.sort().toString();
    performance.innerHTML='本次做題數(shù)：'+gData.total+"&nbsp;正確數(shù)："+gData.correct+"&nbsp;正確率："+getCorrectRate()+"%";
    setHighlight();
    setCheckboxStatus();



    // 得到正確率
    function getCorrectRate() {
        return ((gData.correct/gData.total)*100).toFixed(2);
    }

    // 設(shè)置選中狀態(tài)
    function setCheckboxStatus() {
        const inputTags =document.getElementsByTagName("input");
        for (var i = 0; i < inputTags.length; i++) {
            if (inputTags[i].nodeType) {
                var inputId = inputTags[i].getAttribute("id");
                inputId=inputId.replace("input","");
                if (gData.clickedValues.indexOf(inputId) > -1) {
                    inputTags[i].checked = true;
                }
            }
        }
    }

    // 設(shè)置正確答案語(yǔ)錯(cuò)誤答案 高亮
    function setHighlight(){
        var liTags =document.getElementsByTagName("li");
        for(var i in liTags){
            if(liTags[i].nodeType == 1){
                var liKey = liTags[i].getAttribute("id");
                // 正確答案高亮顯示
                if(liTags[i].getAttribute("class") == "optionTrue"){
                    if(gData.clickedValues.indexOf(liKey) == -1){
                        liTags[i].classList.add("cloze_line");
                    }else{
                        liTags[i].classList.add("cloze");
                    }
                }else{
                    // 選錯(cuò)的加刪除線
                    if(gData.clickedValues.indexOf(liKey) != -1){
                        liTags[i].classList.add("wrong");
                    }
                }
            }
        }
    }
</script>

把3個(gè)模板代碼都放進(jìn)去之后，選擇題的模板就制作完成了。

五、怎么修改成自己喜歡的模板？

要修改大體分為兩種：

• 1、會(huì)點(diǎn)前端代碼的開發(fā)者大佬
  這個(gè)不用說(shuō)，注釋寫得明明白白，隨便改，覺(jué)得我寫得Low，還可以自己手?jǐn)]一個(gè)出來(lái)，都不算難。這個(gè)就不具體說(shuō)了
• 2、不會(huì)寫代碼的大佬
  感覺(jué)大多數(shù)都是這類型的人，像考研什么的特別多。如果一點(diǎn)編程經(jīng)驗(yàn)都沒(méi)有的話，要改還是稍微有點(diǎn)點(diǎn)難度。
  但是可以改皮膚，也就是更改背景和字體大小顏色成自己的顏色，什么護(hù)眼色呀，炫酷黑呀等等。
  Anki 默認(rèn)有一個(gè)卡片的CSS樣式 我們只需要改那個(gè)屬性即可,位置在中間的代碼第一個(gè).card。

.card{
    font-family:Arial;
    font-size:22px;
    text-align:left;
    color:#fff;
    background-color:#222;
}

先解釋一下上面代碼的意思

• font-family
  這個(gè)是整個(gè)卡片是什么字體，這個(gè)不需要改，可選值："times"、"courier"、"arial"
• font-size
  這個(gè)是顯示的字體大小，單位是像素(px)，如果你覺(jué)得字體顯示大了你就把它調(diào)小，怎么調(diào)小就是把當(dāng)前的font-size:22px; 改成 font-size:20px;。
  如果感覺(jué)還大就改成font-size:19px;，由此我們知道。只需要把22px中的數(shù)字變大或變小就可以調(diào)節(jié)字體。
• text-align
  卡片文本的水平對(duì)齊方式，我不建議改，可選值：left、right、center 、justify、inherit。
  默認(rèn)是左邊對(duì)齊，看單詞知道后面是右邊對(duì)齊，居中對(duì)齊，兩端對(duì)齊，繼承父類對(duì)齊
• color
  看單詞就知道是字體顏色，這個(gè)值可以填的方式很多，最簡(jiǎn)單的可以寫顏色名稱如紅色：color:red;、藍(lán)色：color:blue;等其他顏色
  還有一種是填十六進(jìn)制的顏色，如color:#fff; 這個(gè)是白色，對(duì)應(yīng)為color:rgb(255,255,255)，如果你對(duì)十六進(jìn)制不熟，也可以使用RGB格式的顏色
  如：白色：color:rgb(255,255,255)、黑色：color:rgb(0,0,0),可以去搜索引擎搜索你想要的顏色進(jìn)行替換即可。
• background-color
  看單詞大概知道是背景顏色，這個(gè)的值和上面的color 值一樣，可以使用單詞顏色如：red、blud、green 、yellow等，
  十六進(jìn)制或RGB都可以。

倒計(jì)時(shí)的功能

再說(shuō)一下這個(gè)吧，有些人不需要，有些人需要

• 1、去掉倒計(jì)時(shí)功能
  這個(gè)簡(jiǎn)單在正面模板找到如下代碼片段進(jìn)行修改

    initOptions();
    var endTime="2020/08/29 00:00:00";
    countDown(endTime);
    
    // 只需要改一行代碼，就是在“ countDown(endTime);” 這行代碼前面加兩個(gè)斜桿，如下這樣的
    initOptions();
    var endTime="2020/08/29 00:00:00";
    //countDown(endTime);

• 2、修改倒計(jì)時(shí)的結(jié)束時(shí)間
  還是上面的代碼

    initOptions();
    var endTime="2020/08/29 00:00:00";
    countDown(endTime);
    
    // 如果你想把時(shí)間改成2022年的12月1號(hào)，12點(diǎn)12分12秒，那代碼就改成如下這個(gè)樣子
    initOptions();
    var endTime="2022/12/01 12:12:12";
    countDown(endTime);

最終

• 因文化水平有限，寫了那么多不知道效果怎樣，各位看官有沒(méi)有看明白。
• 我知道很多人懶得復(fù)制代碼，或者沒(méi)看明白，沒(méi)關(guān)系我都想到了。導(dǎo)出一個(gè)apkg文件模板給你們
• Github下載地址：https://github.com/rstyro/anki-model/tree/master/choose
• Gitee這個(gè)國(guó)內(nèi)訪問(wèn)更快https://gitee.com/rstyro/anki-model/tree/master/choose
• 源碼或者模板都在上面，感覺(jué)好用，給個(gè)好評(píng)，在Github上點(diǎn)個(gè)Star(?)