Help [javascript]

[JIRO]

hello.
I want to use ＜td＞ as a replacement for cloze and set it to display one by one.
Is there anyone who can create a JavaScript with this functionality?

–
Front
↓

<div class="tabletable">
{{answer}}
</div>

<style>
td {
    color: transparent; /* 透明にする */
  }

.visible {
    color: lightblue; /* 表示されたときの色を薄い青に */

  }
</style>

<button id="resetButton">reset</button>

<button id="nextButton">Next>>></button>

–

Back
↓

{{FrontSide}}

<style>

td {
    font-weight: bold;
}

.nightMode td {
    color: lightblue;
}

</style>

–

{{answer}} field
example
↓

<table border="1" style="border-collapse: collapse; width: 100%; height: 84px;"><colgroup><col style="width: 20%;"><col style="width: 49.9376%;"></colgroup><tbody><tr style="height: 28px;"><th style="height: 28px;">English</th><td style="height: 28px;">Hello</td></tr><tr style="height: 28px;"><th style="height: 28px;">Japanese</th><td style="height: 28px;">konnichiwa</td></tr></tbody></table>

English	Hello
Japanese	konnichiwa

–
I tried to create script with AI. The first card worked, but the second card doesn’t work.

<script>
  // 初期設定
  let currentIndex = 0; // 現在表示しているインデックス
  const tds = document.querySelectorAll('.tabletable td'); // <td>要素を取得

  // 全ての<td>を透明にする
  tds.forEach(td => {
    td.style.color = 'transparent';
  });

  // 次の<td>を表示する関数
  function revealNext() {
    if (currentIndex < tds.length) {
      tds[currentIndex].style.color = 'lightblue'; // 表示色を設定
      currentIndex++; // インデックスを進める
    }
  }

  // 再表示する関数
  function reloadOccs() {
    tds.forEach(td => {
      td.style.color = 'transparent'; // 全てを透明に戻す
    });
    currentIndex = 0; // インデックスをリセット
  }

  // キーボードイベントの処理
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      revealNext(); // 右矢印で次の回答を表示
    }
    if (e.key === 'ArrowLeft') {
      reloadOccs(); // 左矢印でリロード
    }
  });

  // ボタンのクリックイベント処理
  document.getElementById('nextButton').addEventListener('click', revealNext);
  document.getElementById('resetButton').addEventListener('click', reloadOccs);
</script>

–
I want to add these functions.
・one by one
・auto flip to back

Thank you

[sorata]

@JIRO

hello.
I want to use as a replacement for cloze and set it to display one by one.

You want to have multiple sides to a card?

[JIRO]

@JIRO

I want to use ＜td＞ as a replacement for cloze and set it to display one by one.

Thank you for the replying.
Sorry, I made a mistake in the sentence.
correct: I want to use ＜td＞ as a replacement for cloze and set it to display one by one.

Also, I’m sorry my English is not good.

@sorata

You want to have multiple sides to a card?

yes.(?)

front

full

<div style='font-family: "Arial"; font-size: 15px;'>
   <rb>{{Title}}</rb>
</div>

{{T 1}}
<p>

<div class="mydiv">
<div class="tabletable">
{{1答え}}
</div>

<style>
td {
    color: transparent; /* 透明にする */
  }

.visible {
    color: lightblue; /* 表示されたときの色を薄い青に */

  }
</style>

<button id="resetButton">リセット</button>
<button id="nextButton">Next>>></button>

<script>
  // 初期設定
  let currentIndex = 0; // 現在表示しているインデックス
  const tds = document.querySelectorAll('.tabletable td'); // <td>要素を取得

  // 全ての<td>を透明にする
  tds.forEach(td => {
    td.style.color = 'transparent';
  });

  // 次の<td>を表示する関数
  function revealNext() {
    if (currentIndex < tds.length) {
      tds[currentIndex].style.color = 'lightblue'; // 表示色を設定
      currentIndex++; // インデックスを進める
    }
  }

  // 再表示する関数
  function reloadOccs() {
    tds.forEach(td => {
      td.style.color = 'transparent'; // 全てを透明に戻す
    });
    currentIndex = 0; // インデックスをリセット
  }

  // キーボードイベントの処理
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      revealNext(); // 右矢印で次の回答を表示
    }
    if (e.key === 'ArrowLeft') {
      reloadOccs(); // 左矢印でリロード
    }
  });

  // ボタンのクリックイベント処理
  document.getElementById('nextButton').addEventListener('click', revealNext);
  document.getElementById('resetButton').addEventListener('click', reloadOccs);
</script>

</div>

back

and, There are 2 cards.
card1: {{T 1}} → {{1答え}}
card2: {{T 2}} → {{2答え}}

[Eltaurus]

@JIRO

card1: {{T 1}} → {{1答え}}
card2: {{T 2}} → {{2答え}}

Do you mean that all your notes will have two sets of fields with questions and answers, or should the total number be different for each note? Can you show the full set of your fields, that includes T2 and 2答え?

[JIRO]

Thank you for the replying.

This is Notion URL. I couldn’t upload a demo video and .apkg on this forum.

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

I’m sorry If I didn’t understand your questions.
I’d like to create 2 cards in 1 note.

and I made mistakes.
not ↓↓
card1: {{T 1}} → {{1答え}}
card2: {{T 2}} → {{2答え}}
↑↑

Both {{T 1}} and {{1答え}} are on both front and back.
so,
card1: {{T 1}}{{1答え}} → {{T 1}}{{1答え}}{{Extra}}
card2: {{T 2}}{{2答え}} → {{T 2}}{{2答え}}{{Extra}}

---

（「T 1」use as “Question”,「答え」means “Answer”）

---

{{1答え}} includes ＜td＞.
I want to use ＜td＞～＜/td＞ as cloze.

so, my idea is transparent＜td＞ on front, and not to transparent on back.
and, on front, show cloze one by one, then appear the last cloze, automatically flip to back.

[Eltaurus]

@JIRO

I’d like to create 2 cards in 1 note.

Is there a particular reason why you want them to belong to the same note? The respective pieces of information do not seem to be relevant to each other, why not simply make two separate notes with one T and one 答え fields?

Also, why do you want this to be a cloze-type note? The common type notes seem to better suit this functionality.

---

@JIRO

my idea is transparent＜td＞ on front, and not to transparent on back.
and, on front, show cloze one by one, then appear the last cloze, automatically flip to back.

I’m not sure I understand this completely, so to verify:

1. the front of the card should display only “en | hello” at first
2. when the “Next>>” button is pressed, the “en | hello” should be hidden and “jp | konnichiwa” should take its place
3. when the “Next>>” button is clicked again, the card should flip to the backside, which displays the full table with both rows

Does this describe what you are trying to achieve correctly?

[JIRO]

Thank you for the replying.

you’re opinion is true. I also use a cloze-type note as main, but similar or opposite answer is not go with me.
for example, this question’s answer is “yes”. then, next similar question’s answer is “no”.
Like this, I didn’t memorize. I just guess.
So, I use multiple cards in 1 note.

---

Thank you for explaining that so clearly!!!
your explanation is close.

1. the front of the card should display only
   |en | |
   |jp | |
   at first.

2. when the “Next>>” button is pressed,
   |en | hello |
   |jp | |

3. when the “Next>>” button is clicked again (last cloze), the card should flip to the backside, which displays the full table with both rows
   so, the backside is ↓
   |en | hello |
   |jp | konnnichiwa |
   {{extra}}

---

If, en, jp, and add korean

1. the front of the card should display only
   |en | |
   |jp | |
   |korean | |
   at first.

2. when the “Next>>” button is pressed,
   |en | hello |
   |jp | |
   |korean | |

3. when the “Next>>” button is pressed,
   |en | hello |
   |jp | konnichiwa |
   |korean | |

4. when the “Next>>” button is clicked again (last cloze), the card should flip to the backside, which displays the full table with both rows
   so, the backside is ↓
   |en | hello |
   |jp | konnichiwa |
   |korean | annyeong |
   {{extra}}

[Eltaurus]

@JIRO

you’re opinion is true. I also use a cloze-type note as main, but similar or opposite answer is not go with me.
for example, this question’s answer is “yes”. then, next similar question’s answer is “no”.
Like this, I didn’t memorize. I just guess.

I don’t think I understand what you are saying. Could you please describe it in more detail?

@JIRO

So, I use multiple cards in 1 note.

In the end, is using the cloze-type cards specifically critical for you, or are you open to making this work with regular cards instead? That should make maintaining your collection much easier

---

I think I understand the intended behavior now, but I still have to ask: is putting a table inside each note’s 答え fields is really how you want to organize your collection, or is this just an implementation you tried because you are unaware of the better ways to achieve what you want?

It would seem much more natural to me to put the table on the card template itself and split a single answer field from your setup into several separate ones (for en, jp, and korean respectively) with each containing only the needed word in plain text. The table on the cards then can be set up to display only the languages, for which the fields are not empty. Does such an option sound good for you?

[JIRO]

Thank you for the replying.

With multiple-choice questions, once you know one answer, you naturally know the other. For example, yes or no questions. I don’t like this. (I’m sorry my English and explanation are not good.)

@Eltaurus

In the end, is using the cloze-type cards specifically critical for you, or are you open to making this work with regular cards instead? That should make maintaining your collection much easier

---

I think I understand the intended behavior now, but I still have to ask: is putting a table inside each note’s 答え fields is really how you want to organize your collection, or is this just an implementation you tried because you are unaware of the better ways to achieve what you want?

I can’t think of any better method, but for now, I want to try the approach I’m considering.

@Eltaurus

It would seem much more natural to me to put the table on the card template itself and split a single answer field from your setup into several separate ones (for en, jp, and korean respectively) with each containing only the needed word in plain text. The table on the cards then can be set up to display only the languages, for which the fields are not empty. Does such an option sound good for you?

I’m not sure if I fully understand what you mean, but is it something like this?

Frontside
↓↓
<table>
 <tr>
  <td>{{Field question1}}</td>
  <td>{{Field answer1}}</td>
 </tr>
</table>

{{Field question1}}	{{Field answer1}}
English	Hello

[Eltaurus]

@JIRO

I’m not sure if I fully understand what you mean, but is it something like this?

Something like that.
I’ve made a small test deck for you to try: for JIRO.apkg - Google Drive

I am still unclear about what parts are intended to be used as cloze for cloze-deletion notes, so this one is based on a basic note type. But we can always adjust it further to suit your needs.

[JIRO]

Thank you so much!
I made a few adjustments, but it still worked perfectly! This is exactly what I was looking for!
I truly appreciate your time and effort in creating the deck.
It’s amazing. I really appreciate your help.

[Eltaurus]

You are welcome!
Don’t hesitate to ask if you need anything else modified