Template design not working inside Anki

Can someone who understands code help me make this template work? I don’t know anything about programming and I’ve been making this template by looking at tutorials, seeing ready-made templates and using ia but when I try to put it in my anki it doesn’t work.

(https://codepen.io/gummloan/pen/yLwmdYV)

You should have sent a screenshot showing what appears in your anki or what error message appears to you. This way, it would be easier to help you.

Observation:
If the design is being rendered in an acceptable way and close to what you want on the “codepen” screen as it appeared to me, the problem is not broken HTML and CSS code.

I already took your code and tested it on my Anki and it is working. However, there are 2 problems, 1 problem that you must be facing and another that I have already found:

1 - Problem you must be facing:
This within your code > {{Target Word}}, {{Sentence}}, {{Audio}}, {{Pronunciation}}, {{Translation}} are anki fields. You must fill them in in “Add Card”. For your code to work, you need to modify the card’s field structure. These fields must exist prior to the code.

Your fields need to look like this…

To do this, you must edit them here…
Edit Fields

There are 2 ways to edit card fields:

1. Add Card > Fields (top right) - Use this method if you have already created a different type of note than Anki’s native notes (I recommend duplicating as you may need the native notes one day). Otherwise, use the method below.

2. Tools > Manage Note Types > Add > Basic Duplicate > Rename to a name you want > Select this new note you created > Fields > Edit them…

2- Problem I found:
The code you provided does not have a “back”, only the “front” of the card. So when I click “show answer” when reviewing the card, it only shows “shipping”, going completely against the fundamentals of a flashcard, which is to have a back. For me to help you in this aspect, you need to tell me which of these fields you want on the front of the card and which fields you want on the back of the card.

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