Anki JavaScript generated questions

back.html

<div id="back" style="display:none;"></div>
{{FrontSide}}

<hr id=answer>

{{Back}}

example.md

Front

You are in a plane traveling at <data id="groundspeed">...</data> knots. You are currently at <data id="currentAltitude">...</data> feet and traffic pattern is at <data id="targetAltitude">...</data> feet. How many miles will your descent require at 500 ft/min?

Back

<data id="miles">...</data> miles

Script

persist(function (store) {
  var POSSIBLE_GROUNDSPEEDS = [60, 90, 90, 120, 120];
  var POSSIBLE_TARGET_ALTITUDES = [1000, 1500, 2000];
  var POSSIBLE_DELTAS = [1000, 1500, 2000, 2500, 3000, 4000];
  function select(list) {
    return list[Math.floor(Math.random()*list.length)];
  }
  var groundspeed = store.show('groundspeed', select(POSSIBLE_GROUNDSPEEDS));
  var targetAltitude = store.show('targetAltitude', select(POSSIBLE_TARGET_ALTITUDES));
  var delta = store.use('delta', select(POSSIBLE_DELTAS));
  var currentAltitude = store.show('currentAltitude', delta + targetAltitude);
  var minutes = delta / 500;
  var miles = groundspeed * minutes / 60;
  store.show('miles', miles.toFixed(1));
});

front.html

<script>
  window.onerror = function(error){
    var pre = document.createElement('pre');
    pre.innerText = error.message || error.stack || String(error);
    document.body.appendChild(pre);
    alert(error);
  }</script>
  <noscript>No JS :(</noscript>
  {{Front}}
  <pre id="script-src" style="display:none;">
  {{Script}}
  </pre>
  <script>var tpl = document.querySelector('#script-src');
  var src = tpl.innerText;
  
  function getStorageMode() {
    if (typeof py === 'object') return 'py';
    if (
      document.location.href.indexOf('data:') !== 0 &&
      typeof sessionStorage === 'object'
    )
      return 'session';
    return 'dummy';
  }
  
  function createDummyStorage() {
    var dummy = (window.DUMMY_STORAGE = window.DUMMY_STORAGE || {});
    return {
      setItem: function (key, val) {
        dummy[key] = val;
      },
      hasItem: function hasItem(key) {
        return Object.hasOwnProperty.call(dummy, key);
      },
      getItem: function (key, defaultValue) {
        if (this.hasItem(key)) {
          return dummy[key];
        }
        return defaultValue;
      },
      clear: function clear() {
        dummy = window.DUMMY_STORAGE = {};
      },
    };
  }
  
  function createPyStorage() {
    try {
      py.data = window.py.data || {};
      var dataObj = {
        setItem: function (key, val) {
          py.data[key] = val;
        },
        hasItem: function hasItem(key) {
          return Object.hasOwnProperty.call(py.data, key);
        },
        getItem: function (key, defaultValue) {
          if (dataObj.hasItem(key)) {
            return py.data[key];
          }
          return defaultValue;
        },
        clear: function clear() {
          window.py.data = {};
        },
      };
      return dataObj;
    } catch (err) {
      alert(err.message);
    }
  }
  
  function createSessionStorage() {
    return {
      setItem: function (key, val) {
        sessionStorage.setItem(key, val);
      },
      hasItem: function hasItem(key) {
        return sessionStorage.getItem(key) !== null;
      },
      getItem: function (key, defaultValue) {
        if (this.hasItem(key)) return sessionStorage.getItem(key);
        return defaultValue;
      },
      clear: function clear() {
        sessionStorage.clear();
      },
    };
  }
  
  function debug(debuggerId, value) {
    var div =
      document.getElementById(debuggerId) || document.createElement('div');
    div.setAttribute('id', debuggerId);
    div.setAttribute('title', debuggerId);
    document.body.appendChild(div);
    if (typeof value === 'function') {
      div.innerText = value(div.innerText);
    } else {
      div.innerText = value;
    }
  }
  
  function persist(next) {
    window.setTimeout(function () {
      if (window.ankiStorage && !document.getElementById('back')) {
        window.ankiStorage.clear();
      }
      var storageMode = getStorageMode();
      var dataObj;
      function use(key, valueIfMissing) {
        if (dataObj.hasItem(key)) {
          return dataObj.getItem(key, valueIfMissing);
        }
        dataObj.setItem(key, valueIfMissing);
        return valueIfMissing;
      }
      function show(key, valueIfMissing) {
        var value = store.use(key, valueIfMissing);
        var elements = document.querySelectorAll('[id="'+key+'"], [name="'+key+'"]');
        for (var i = 0; i < elements.length; i++) {
          elements[i].innerText = value;
        }
        return value;
      }
      switch (storageMode) {
        case 'session':
          dataObj = createSessionStorage();
          break;
        case 'py':
          dataObj = createPyStorage();
          break;
        default:
          dataObj = createDummyStorage();
          break;
      }
      dataObj.use = use;
      dataObj.show = show;
      window.store = window.ankiStorage = dataObj;
      next(dataObj);
    }, 100);
  }
  
  var handleLoad = new Function(src);
  setTimeout(handleLoad, 0);
  
  </script>