【发布时间】：2021-11-17 18:21:15
【问题描述】：
我正在使用 Anki（您不必熟悉这个），它是一个抽认卡应用程序。在设计卡片时，我无法弄清楚出了什么问题。
卡片的正面：
<div class="front">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
</script>
卡片的背面：
<div class="back">
{{#Title}}<div class="title">{{Title}}</div>{{/Title}}
<div class="subtitle">Details</div>
<table id="clozed">
<tr>
<td class="heading">Origin</td>
<td>{{cloze:Text1}}</td>
</tr>
<tr>
<td class="heading">Insertion</td>
<td>{{cloze:Text2}}</td>
</tr>
<tr>
<td class="heading">Innervation</td>
<td>{{cloze:Text3}}</td>
</tr>
<tr>
<td class="heading">Action</td>
<td>{{cloze:Text4}}</td>
</tr>
</table>
</div>
<script>
// Remove cloze syntax from revealed hint
var hint = document.getElementById("original");
if (hint) {
var html = hint.innerHTML.replace(/\[\[oc(\d+)::(.*?)(::(.*?))?\]\]/mg,
"<span class='cloze'>$2</span>");
hint.innerHTML = html
};
// Scroll to cloze
function scrollToCloze () {
const cloze1 = document.getElementsByClassName("cloze")[0];
const rect = cloze1.getBoundingClientRect();
const absTop = rect.top + window.pageYOffset;
const absBot = rect.bottom + window.pageYOffset;
if (absBot >= window.innerHeight) {
const height = rect.top - rect.bottom
const middle = absTop - (window.innerHeight/2) - (height/2);
window.scrollTo(0, middle);
};
}
if ( document.readyState === 'complete' ) {
setTimeout(scrollToCloze, 1);
} else {
document.addEventListener('DOMContentLoaded', function() {
setTimeout(scrollToCloze, 1);
}, false);
}
// Reveal full list
var olToggle = function() {
var orig = document.getElementById('original');
var clozed = document.getElementById('clozed');
var origHtml = orig.innerHTML
orig.innerHTML = clozed.innerHTML
clozed.innerHTML = origHtml
}
</script>
卡片的css样式：
html {
/* scrollbar always visible in order to prevent shift when revealing answer*/
overflow-y: scroll;
}
.card {
border: 1px solid #404040;
padding: 8px;
font-weight: normal;
font-size: 16px;
text-align: left;
color: black;
background-color: white;
}
/* general layout */
.text {
/* center left-aligned text on card */
column-count: 2;
display: inline-block;
align: center;
text-align: left;
margin: auto;
max-width: 40em;
}
.hidden {
/* guarantees a consistent width across front and back */
font-weight: bold;
display: block;
line-height:0;
height: 0;
overflow: hidden;
visibility: hidden;
}
.title {
background-color: #edcac5;
color: #000000;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.subtitle {
background-color: #3b3b3d;
color: #FFFFFF;
font-weight: bold;
font-size: 16px;
padding: 3px;
margin-bottom: 5px;
text-align: center;
}
.heading {
color: #6395ff;
font-weight: bold;
text-align: left;
width: 30%;
}
table {
table-layout: fixed;
width: 100%;
}
td {
word-wrap: break-word;
}
/* clozes */
.cloze {
/* regular cloze deletion */
font-weight: bold;
color: #FFFFFF;
}
.card21 #btn-reveal{
/* no need to display reveal btn on last card */
display:none;
}
/* additional fields */
.extra{
margin-top: 0.5em;
margin: auto;
max-width: 40em;
}
.extra-entry{
margin-top: 0.8em;
font-size: 0.9em;
text-align:left;
}
.extra-descr{
margin-bottom: 0.2em;
font-weight: bold;
font-size: 1em;
}
#btn-reveal {
font-size: 0.5em;
display:none;
}
.mobile #btn-reveal {
font-size: 0.8em;
display:none;
}
我认为该表与此有关，非常感谢任何帮助/反馈。
【问题讨论】：
-
front中的表和back中的表共享同一个id。 Id 必须是唯一的。这可能不会导致您的问题，但我会解决它以消除它作为嫌疑人。