一、Anki是什么？

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

二痴昧、Anki如何下載與安裝？

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

三豪娜、Anki怎么用？

這個(gè)我有點(diǎn)不好意思說（-_-因?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)有正反面脐嫂，正面就是問題统刮，反面是隱藏的存放答案。當(dāng)我們學(xué)習(xí)的時(shí)候可以顯示答案看我們是否作對(duì)題目
• 4账千、開始學(xué)習(xí)
  卡片制成(也就是把卡片添加進(jìn)記憶庫(kù))之后就可以開始學(xué)習(xí)了侥蒙。
• 5、卡片的級(jí)別
  1匀奏、生疏/錯(cuò)誤：你一看到就知道自己沒見過或者見過也忘了鞭衩。
  2、困難/模糊：你用力想能記起來一點(diǎn)娃善，但不完全论衍。
  3、猶豫/想起：你仔細(xì)想聚磺，還是能夠回憶出來坯台。
  4、順利/正確：沒什么難度瘫寝，基本熟悉了蜒蕾。

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

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

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

show1.png

正確時(shí)顯示如下

show2.png

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

show3.png

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

  
  
  1.png
  
  
  2.png
  
  
  3.png

• 2准夷、添加問題與答案解析
  如下圖钥飞，我隨便網(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í)  $wtnasrv天 ${h} 時(shí) ${m} 分 ${s} 秒`;
        //document.getElementById("countDown").innerHTML = `考試倒計(jì)時(shí)  $nrjrqum天 `;
        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)槲覀冞€沒有填寫中間的分享格式刷代碼

• 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è)置正確答案語錯(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è)不用說掘猿，注釋寫得明明白白病游，隨便改，覺得我寫得Low稠通，還可以自己手?jǐn)]一個(gè)出來衬衬，都不算難轻绞。這個(gè)就不具體說了
• 2、不會(huì)寫代碼的大佬
  感覺大多數(shù)都是這類型的人佣耐，像考研什么的特別多。如果一點(diǎn)編程經(jīng)驗(yàn)都沒有的話唧龄，要改還是稍微有點(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)佩番，如果你覺得字體顯示大了你就把它調(diào)小众旗，怎么調(diào)小就是把當(dāng)前的font-size:22px; 改成 font-size:20px;。
  如果感覺還大就改成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í)的功能

再說一下這個(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);

最終

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