Typing in answer as well as having formatted Back Side

Hi,

I would like to create and use a specific card template for my android phone.
The Idea is to:

1.) Have the front side as an asked question
2.) Have a text box underneath where I can type in my answer.
3.) After selecting “show answer” I would like to have my typed in answer displayed as well as the backside of the card containing the correct answer

The reason why I dont just use the “type in answer”-type is because the answers can be complex and are displayed in a convoluted manner without any fomatting when using that type. I also dont need the automatic comparison between input and backside.

After some research with google I found a post (cant linkt unfortunately) which perfectly describes what i want done.

Sadly two problems have occured:

1.) The textbox to write in the answer is generated. I can select it and paste things into it, but the digital keyboard to type things in does not appear.

2.) If I do paste something into it, that content is not transferred after selecting " show answer". The same textbox appears above the backside of the card but is always empty.

I tried solving the problem via Chatgpt, which gave me this code:

front side ( “Vorderseite” is german for front side):

{{Vorderseite}}

<div>
  <input id="input-box" type="text" placeholder="Type your answer here...">
</div>
<script>
  var isAnkiPc21 = typeof pycmd !== 'undefined';
  var typedAnswer = '';
  var inputBox = document.getElementById('input-box');

  function activateKeyboard() {
    inputBox.focus();
    setTimeout(() => {
      inputBox.click();
    }, 100);
  }

  inputBox.addEventListener('input', (event) => {
    typedAnswer = event.currentTarget.value;
    if (!isAnkiPc21) {
      try {
        sessionStorage.setItem('typedAnswer', JSON.stringify(typedAnswer));
      } catch (error) {
        console.log(`${error.name}: ${error.message}`);
      }
    }
  });

  if (isAnkiPc21) {
    setTimeout(() => inputBox.focus(), 0);
    inputBox.addEventListener('keypress', _typeAnsPress);
  } else {
    setTimeout(() => activateKeyboard(), 0);
  }
</script>

back side (Rückseite=german word for it)

{{Rückseite}}

<div>
  <input id="input-box" type="text" autofocus placeholder="Type your answer here...">
</div>

<script>
  var isAnkiPc21 = typeof pycmd !== 'undefined';
  var typedAnswer = '';
  var inputBox = document.getElementById('input-box');

  inputBox.addEventListener('input', (event) => {
    typedAnswer = event.currentTarget.value;
    if (!isAnkiPc21) {
      try {
        sessionStorage.setItem('typedAnswer', JSON.stringify(typedAnswer));
      } catch (error) {
        console.log(`${error.name}: ${error.message}`);
      }
    }
  });

  if (isAnkiPc21) {
    setTimeout(() => inputBox.focus(), 0);
    inputBox.addEventListener('keypress', _typeAnsPress);
  }

  function _typeAnsPress(event) {
  }
</script>

The two problems remain however. If anyone has an idea how to solve those, I would greatly apprecciate it.

You should be able to post the link in a codeblock as well. I’m sure anyone helping you debug your JS would rather start from that – instead of starting from what ChatGPT put together. [ChatGPT is good a some things, but it tends not to be at Anki things.]

And I’m moving your post to the Card Design category, because I think you’ll get more JS eyes there.

1 Like

thank you!

The link in question is:

https://forums.ankiweb.net/t/field-for-typedanswer-on-answer-card/6380/2?u=primitiverlurch

When you first tried it, using @hkr 's original templates/scripts – did you include field replacements? With appropriate names, based on the fields in your note type? Because I notice that what you posted here has none.

1 Like

This actually already solved problem number 2.).

I have zero experience with coding and was hoping ChatGPT would explain to me what I needed to fill in for the template to run :sweat_smile:

The problem with the virtual keyboard not appearing remains however.

Maybe try turning on Settings → Advanced → Type answer into the card and see if that works.

1 Like

It does, thank you very much!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.