anki填空题卡片模板

已于 2024-09-12 09:29:31 修改
阅读量6.8k 收藏 11
点赞数 4
分类专栏： 软件设置 文章标签： ui 经验分享
于 2021-10-03 13:14:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42000656/article/details/120593640
版权
博主分享了如何在Anki中创建填空题卡片的经验，包括模板设计和功能特点。卡片支持Android和Windows平台，主要内容字段与相关知识字段分开，正面显示全内容，背面为填空题形式，可点击显示答案。提供了正面、背面的代码示例以及CSS样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

最近开始使用anki了，想在零碎时间背点东西。找了很多填空题代码，都没有看到合适的，最终决定自己摸索着改了一版。目前测试是Android和win都可正常使用。
模板题型：填空题（带划线）
主要功能：空格处划线，并每个空格可以点击出现答案。
主要样式：
anki填空题模板

使用了两个字段：内容和相关知识。
内容就是所需背诵的知识点内容，相关知识可以填入扩展知识。

1、正面
anki模板win正面
2、背面
anki模板win背面

根据本人的使用需求是把全内容显示设置成了正面，填空划线设置成了背面，这样可以先背再检验是否已记住主要内容，如有需要可以正背面代码互换。
相关知识在正面采用的是全显示的方式，背面可以选择点击相关知识出现内容，根据情况选择是否需要二次背诵。
背面使用的是 anki填空题点一个显示一个，能够实现点击出现一个一个空验证。

代码：
1、正面（全显示，挖空部分显示红色并有下划线）

	<div class="h2 xleft" id="div0" style="display:none; ">{{内容}}</div>
	<div class="h2 xleft" id="div1" style="display:block;">{{内容}}</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:内容}}</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;">{{内容}}</div>
	<div class="h2 xleft" id="div1" style="display:none; ">{{内容}}</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:内容}}</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; }


/* ---------- 其他调整 ---------- */

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; }
anki模板_11、ANKI的卡牌模板
weixin_39940253的博客
11-27 2052
获取模板1.搜索：如搜索ANKI模板、ANKI单词模板2.逛卡牌：可以通过下载别人的卡牌资源发现合适的模板导入模板导入模板的方式是通过导入卡牌间接获得卡牌模板，ANKI会自动获取卡牌中的模板，出现在卡牌模板列表中使用模板导入模板成功后，点击添加卡牌，在卡牌模板列表中找到刚导入的卡牌卡牌模板解刨卡牌模板由卡牌正面和反面组成，则正反面由字段组成字段：字段就是内容块，可以输入文字、图片、声音、视频正面：...
自制Anki选择题模板(支持桌面版/移动版)
热门推荐
Boone的博客
04-27 1万+
anki选择题模板
alter添加多个字段_卡片/模板/笔记/字段——你都理解了吗？
weixin_39633781的博客
10-28 550
卡片/模板/笔记/字段——你都理解了吗？秃飞猛进的Daniel Anki干货铺 今天创建卡片在开始创建卡片之前，有两个概念前悉知。模板字段模板模板的出现是为了简化大量的重复劳动，将无需频繁改动的内容标准化，形成可复用的组件，这些可复用的标准化内容称之为模板。卡片内容可展示的样式非常多，大部分能在现代浏览器上实现的效果，在Anki中也可以实现。比如：字体大小、字体颜色、背景颜色、内容位置等等样式都可...
anki 新的卡片类型_Anki选择题卡片制作详解
weixin_39816141的博客
12-18 3549
一、Anki是什么？Anki是一个辅助记忆软件，它非常利于复习记忆，它可以按照艾宾浩斯遗忘曲线，给你安排合理的复习频率，就像你使用背单词软件时的操作一样。一次记忆一个卡片上的一个小知识点，记得牢，而且能够充分利用碎片时间。容易忘记、重复复习过于熟悉的，这些小问题都可以解决。二、Anki如何下载与安装？下载与安装很简单，傻瓜式安装，就是一直点下一步即可。Anki中国地址：http://www.ank...
一个Anki填空题模板
yivifu的专栏
06-12 1993
本文创建了一个可输入答案并比对输入的答案与正确答案的差异的填空题模板。
anki-model:anki 选择题模板
07-23
anki-model Anki 模板 choose 这个文件夹里面就是选择题模板 front.html 这个里面是正面的模板代码 share.html 这个是中间的那个共享格式刷代码 back.html 这个就是背面的模板代码 .apkg 就是Anki的模板文件了 怎么下载？ 右上有一个 绿色Code 的按钮点击-选择 就可以下载了。 Anki 网上找的模板基本都不太符合我的需求，所以自己改了下。 喜欢的可以直接用我导出的模板，不喜欢的可以自己修改代码 Anki这个选择题模板文章介绍：
Anki 学习日记 - 卡片模版 - 单选ABCD（纯操作）
fantastic_13_7的博客
09-29 1121
摘要：在不懂前端语言的情况下自定义卡片模版，卡片模版的字段
anki-template-manager:轻松创建精美的Anki模板
03-25
:ATM_sign: Anki模板管理器 为您的Anki创建漂亮的音符类型模板变得轻而易举。 设置 我们使用Yarn作为包管理器。 要安装依赖项，只需在根目录中执行以下操作： yarn install 燃烧起来;动起来 yarn redwood dev 您的浏览器应自动打开http://localhost:8910以查看该Web应用程序。 Lambda函数在http://localhost:8911上运行，并且还代理到http://localhost:8910/.redwood/functions/* 。
Anki 2.0填空模板与HTML代码在卡片设计中的应用
例如，可以使用如下模板，在第一个填空题显示“提示1”，第二个填空题显示“提示2”： ```html {{cloze:Text}} {{#c1}} {{提示1}} {{/c1}} {{#c2}} {{提示2}} {{/c2}} ``` 除了填空模板，Anki还支持在模板中插入...
Anki 2.0用户手册：多项选择题与学习策略
手册还涉及编辑和卡片模板的高级功能，包括填空、输入特殊字符、媒体和LaTeX引用、条件替换等。这些特性帮助用户创建更具互动性和深度的学习卡片，提升学习效率。此外，Anki提供多种控制学习进度和顺序的选项，如...
Anki卡片批量模板(Excel).rar
02-28
本人在用Excel制作Anki批量卡片时，在Excel中准备数据，再复制到TXT文件中，最后还要将得到的TXT转成UTF-8编码才能导出Anki。由于卡片数量太多，感觉太繁琐！所以诞生了这段vba代码，直接从Excel模板中生成Anki可识别的TXT文件。
anki 欧路同步模板
09-18
个人使用的anki背单词的模板，主要适用于Dict2anki插件同步到anki的生词
anki制卡工具
11-10
Anki是一个记忆辅助软件，它可以让记忆过程变得更加轻松容易。因为，相比传统方法他更加高效更加智能，利用它你可以大大降低你的学习时间，或者你可以在同样长的时间内学习更多的内容。 便捷制作英语单词卡片的工具，英语单词卡片模版
Anki 记忆卡片——oracle
05-12
包含整理的100多条Anki记忆卡片，又需要的同学可以下载，另外还有MySql、javaseAPI,前端相关的，可以方便高效的记忆常见的相关语法。
anki-mc:Anki的多项选择题
03-19
Anki-mc 将多个选择卡添加到Anki。 屏幕截图 单选 多项选择 Kprim 兼容性 要使用此附加组件，需要Anki 2.1.20或更高版本。 可以使用所有计算机和移动应用程序以及在AnkiWeb上查看使用此附加组件创建的卡。 用法 创建/编辑 在安装附加组件后首次启动Anki时，便笺类型会自动添加。 创建卡时，在“答案”（Answers）字段中输入“ 1”表示正确的选择，或输入“ 0”表示错误的选择。可以通过“ QType”字段选择问题类型。它可以是0（Kprim），1（多项选择）或2（单项选择）。部分显示了问题类型的外观。 “答案”字段中的这些值必须用单个空格分隔。 “答案”（Answer）字段中值的顺序和数量必须与选择“ Q_1”至“ Q_5”相对应。如果不需要所有选择，只需将其余的“ Q_”字段留空，并在“答案”字段中输入所需的任意数量的值即可。 审核中 相应地选择正确和不正
Anki 2.0用户手册：Spark2.7.1与键盘快捷键
对于相关卡片（如正反面或填空题的关联卡片），Anki会自动搁置它们以避免连续显示，搁置的卡片会在隔日或手动取消后重新进入复习流程。 键盘快捷键是提高Anki使用效率的关键。如空格或回车用于显示答案，1-4键可以...
Markdown/PDF文档 和 Anki记忆卡
最新发布
02-25
- **自定义内容**：可添加题目类型（如选择题、填空题）、关联图片或代码截图。 #### **适用场景** - **概念速记**：快速记忆高频术语（如偏向锁、TLAB、Spring Bean生命周期）。 - **面试冲刺**：每天刷30张卡...
推荐一款引人入胜的Anki模板库：Prettify
gitblog_00050的博客
05-31 2146
推荐一款引人入胜的Anki模板库：Prettify 项目地址:https://gitcode.com/gh_mirrors/an/anki-prettify 项目介绍 Prettify 是一个精心设计的Anki闪卡模板集合，它拥有现代和简洁的主题，将学习变得更有趣、更具吸引力。这个开源项目的目标是让闪卡更加美观，减少视觉干扰，并充分利用Anki的功能或进一步优化。 项目技术分析 Prettify...
兼容各操作系统平台的Anki选择题库模板
yivifu的专栏
05-02 5785
本文只做了一个anki记忆卡选择题模板，该模板采用了可以兼容Windows、ios、mac、安卓、Linux等所有平台的持久化模块，因而能够统计出一次学习过程的成绩，而不是只能判定当前所做题目的成绩。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值