Blank fields when creating a new card

[alexandreberri]

Hi! I’m using the Desktop version of Anki to create cards with questions in the style “5 choices 1 answer”. When I try to study those cards in the AnkiDroid or AnkiWeb they work perfectly, but whe I try the same cards on Anki Desktop the options and the answer are completely blank,… Im Sending imagens of the problem.

AnkiDroid Version working just fine

What is wrong in the Desktop version?

[abdo]

Can you post the content of both the front and back templates?

[alexandreberri]

Sure!!!

FRONT:

{{Question}}

a.&nbsp&nbsp&nbsp

b.&nbsp&nbsp&nbsp

c.&nbsp&nbsp&nbsp

d.&nbsp&nbsp&nbsp

BACK
{{FrontSide}}

---

Resposta: %ANSWER%

{{#Explanation (optional)}}

{{Explanation (optional)}}

{{/Explanation (optional)}}

{{#Tags}}Tags:

{{Tags}}

{{/Tags}}


[abdo]

Use the preformatted text option so that the pasted text shows correctly and doesn’t get truncated.

[alexandreberri]

FRONT

   <span id='front'>

<p class='question'>{{Question}}
<br><br>
<br></p>

<p id='a'>a.&nbsp&nbsp&nbsp</p>
<p id='b'>b.&nbsp&nbsp&nbsp</p>
<p id='c'>c.&nbsp&nbsp&nbsp</p>
<p id='d'>d.&nbsp&nbsp&nbsp</p>

</span>

<script>

function getChoices() {
  // *** Modify based on the number of choice fields in the card ***
  return ["{{text:Answer1}}", "{{text:Distractor2}}", "{{text:Distractor3}}", "{{text:Distractor4}}"];
}

function getAnswers() {
  // *** Modify based on the number of correct choice fields in the card ***
  return ["{{text:Answer1}}"];
}

function getChoiceIds() {
  // *** Modify based on the number of choice fields in the card ***
  // *** If you want to change the display on cards from a, b, c, d to 1, 2, 3, 4 or A, B, C, D, then just modify the HTML
  // *** ex: <p id='A'>A.</span></p> and return ['A','B','C','D'];
  return ["a", "b", "c", "d"];
}

function getSpecialCharacterArray() {
   return [ '[[', ']]' ];
}

function getReplacementSpecialCharacterArray() {
   return [ '<', '>' ];
}

function replaceSpecialCharacters(array) {

   var sc = getSpecialCharacterArray();
   var rc = getReplacementSpecialCharacterArray();
   var str = '';
   var n = -1; var pos = 0;

   // loop through all the choices
   for (var i=0; i<array.length; i++) {

        // get a choice entry from the array
        str = array[i];

       // search for all the special characters to replace in the choice string
       for (var j=0; j<sc.length; j++) {
         
           str = str.split(sc[j]).join(rc[j]);

       } // end-for j
       array[i] = str;
   } // end-for i

}

// ************************************ DO NOT MODIFY *******************************************
function DummyStore() {
  var instance;
  return instance = 
    { store: {}
    , setItem: function (key, val) {
        instance.store[key] = val;
        return val;
      }
    , getItem: function (key, def) {
        var val = instance.store[key]; 
        return val == null ? def : val;
      }
    , tryItem: function (key, val) {
        var curr = instance.getItem(key, undefined);
        return curr == null ? instance.setItem(key, val) : curr;
      }
    , clear: function () {
        this.store = {};
      }
    };
}

function PyStore(py) {
  py.data = py.data || {};
  var instance;
  return instance = 
    { setItem: function (key, val) {
        py.data[key] = val;
        return val;
      }
    , getItem: function (key, def) {
        var val = py.data[key];
        return val == null ? def : val;
      }
    , tryItem: function (key, val) {
        var curr = instance.getItem(key, undefined);
        return curr == null ? instance.setItem(key, val) : curr;
      }
    , clear: function () {
        py.data = {};
      }
    };
}

function SessionStore(sessionStorage) {
  var instance;
  return instance = 
    { setItem: function (key, val) {
        sessionStorage.setItem(key, val);
        return val;
      }
    , getItem: function (key, def) {
        var val = sessionStorage.getItem(key);
        return val == null ? def : val;
      }
    , tryItem: function (key, val) {
        var curr = instance.getItem(key, undefined);
        return curr == null ? instance.setItem(key, val) : curr;
      }
    , clear: function () {
        sessionStorage.clear();
      }
    };
}

function persist(cb) {
  window.setTimeout(function() {
    // Determine whether to use Anki's Bridge object (Desktop) or sessionStorage (AnkiDroid) to store data across sides.
    store = typeof(py) !== "undefined" 
            ? PyStore(py)
            : typeof(sessionStorage) !== "undefined" 
              ? SessionStore(sessionStorage)
              : DummyStore();

    if (!document.getElementById('answer')) {
      store.clear()
    }

    cb(store);
  }, 0); //Execute after Anki has loaded its Bridge object.
}

function shuffleArray(array){
  for (var i = array.length - 1; i > 0; i--){
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  array.push("-"); // placeholder for the answer string
}

// ** Card logic
function run(store) {
  // get the choices field values from the card
  var choices = getChoices();
  replaceSpecialCharacters(choices);

  shuffleArray(choices); // note: last entry in array holds answer string to be displayed

  // choice identification
  var id =  getChoiceIds();

  // determine the choice id(s) for answer(s)
  var answers = getAnswers();
  replaceSpecialCharacters(answers);

  // generate a string with choice id(s)
  var answer_str = '';
  for (var i=0; i<choices.length-1; i++) {
    // loop through the correct answers (depending on the card type there may be more than one correct answer)
    for (var j=0; j<answers.length; j++) {
       if (choices[i] == answers[j])
         answer_str = answer_str + id[i] + ", ";
    }
  }
  // store answer string at the end of the choice array
  answer_str = answer_str.slice(0, answer_str.length-2);
  choices[choices.length-1] = answer_str;

  // convert choices array to a JSON string to be stored
  var json_str = JSON.stringify(choices);

  // persist the choices order and correct answers
  var json_data = store.tryItem("json_data", json_str);

  // get the array back from storage (so data can be displayed on both sides of the card)
  var stored_data = JSON.parse(json_data);

  // modify the card output to display the randomized choices
  if (document.getElementById("front")) {
    for (var i=0; i<stored_data.length-1; i++) {
      document.getElementById(id[i]).innerHTML = document.getElementById(id[i]).innerHTML+ stored_data[i];
    }
  }
  if (document.getElementById("back")) {
    document.getElementById("bans").innerHTML = document.getElementById("bans").innerHTML.replace("%ANSWER%", stored_data[stored_data.length-1]);
  }
}

persist(run);

</script>


**BACK**

    {{FrontSide}}

<span id='back'>
<hr id='answer'>

<p id='bans' class='ans'>Resposta: %ANSWER%</p>

{{#Explanation (optional)}}
<span class='exp'>
{{Explanation (optional)}}
</span>
{{/Explanation (optional)}}

</span>

<p class='tag'>
{{#Tags}}Tags:
{{Tags}}
{{/Tags}}
</p>

[alexandreberri]

I’m quite a noobie here, sorry!!
Now I think it is ok.

[abdo]

This is a problem with the JavaScript code in the template.
Anki prints the following to the console:

JS error :122 Uncaught SecurityError: Failed to read the 'sessionStorage' property from 'Window': Storage is disabled inside 'data:' URLs.

I don’t know how to fix this. You may want to contact the deck’s author to update the deck to work with recent versions of Anki, or you can try an old version to see if it works.

It may be expected that the template works differently on different clients, since JavaScript functionality is provided without any support or warranty.

[alexandreberri]

I’ll try this steps!!
Thanks!!!