front.html

<script>
  // v1.0.0 - https://github.com/SimonLammer/anki-persistence/blob/eeb2e1a9e37c941dd63e1fe6c2a257f043c40e0d/script.js
  if(void 0===window.Persistence){var _persistenceKey="github.com/SimonLammer/anki-persistence/",_defaultKey="_default";if(window.Persistence_sessionStorage=function(){var e=!1;try{"object"==typeof window.sessionStorage&&(e=!0,this.clear=function(){for(var e=0;e<sessionStorage.length;e++){var t=sessionStorage.key(e);0==t.indexOf(_persistenceKey)&&(sessionStorage.removeItem(t),e--)}},this.setItem=function(e,t){null==t&&(t=e,e=_defaultKey),sessionStorage.setItem(_persistenceKey+e,JSON.stringify(t))},this.getItem=function(e){return null==e&&(e=_defaultKey),JSON.parse(sessionStorage.getItem(_persistenceKey+e))},this.removeItem=function(e){null==e&&(e=_defaultKey),sessionStorage.removeItem(_persistenceKey+e)})}catch(e){}this.isAvailable=function(){return e}},window.Persistence_windowKey=function(e){var t=window[e],n=!1;"object"==typeof t&&(n=!0,this.clear=function(){t[_persistenceKey]={}},this.setItem=function(e,n){null==n&&(n=e,e=_defaultKey),t[_persistenceKey][e]=n},this.getItem=function(e){return null==e&&(e=_defaultKey),null==t[_persistenceKey][e]?null:t[_persistenceKey][e]},this.removeItem=function(e){null==e&&(e=_defaultKey),delete t[_persistenceKey][e]},null==t[_persistenceKey]&&this.clear()),this.isAvailable=function(){return n}},window.Persistence=new Persistence_sessionStorage,Persistence.isAvailable()||(window.Persistence=new Persistence_windowKey("py")),!Persistence.isAvailable()){var titleStartIndex=window.location.toString().indexOf("title"),titleContentIndex=window.location.toString().indexOf("main",titleStartIndex);titleStartIndex>0&&titleContentIndex>0&&titleContentIndex-titleStartIndex<10&&(window.Persistence=new Persistence_windowKey("qt"))}}
</script>

<div class="wrap-container">
  <div class="body">
    <div class="question">{{id}}.<span id="questionType" class="question-type"> </span>{{cloze:question}}</div>
    <div class="options" id="front-options"></div>
    <div id="front-tag"></div>
  </div>
</div>

<div id="front-footer" class="footer">v3.16，作者：git9527</div>

<div id="settingsModal" class="modal">

</div>

<script>

  var DEFAULT_SHOW_QUESTION_TYPE = '0'
  var DEFAULT_HIDE_OPTIONS = '0'
  var DEFAULT_RANDOM_OPTIONS = '0'
  var DEFAULT_DELAY_OPTIONS = '0'
  var DEFAULT_NORMAL_OPTIONS = '0'
  var DEFAULT_HIDE_NOTES = '0'
  var DEFAULT_AUTO_FLIP = '1'


  var showQuestionType = DEFAULT_SHOW_QUESTION_TYPE
  var hideOptions = DEFAULT_HIDE_OPTIONS
  var randomOptions = DEFAULT_RANDOM_OPTIONS
  var delayOptions = DEFAULT_DELAY_OPTIONS
  var normalOption = DEFAULT_NORMAL_OPTIONS
  var hideNotes = DEFAULT_HIDE_NOTES
  var autoFlip = DEFAULT_AUTO_FLIP
  var isDelayOptionComing = false

  function showFrontOptions(hideOption, randomOption, delayOption) {
    var keySeq = []
    var optionObjs = getOptionObjs(randomOption)
    initEmptyOptionList(optionObjs)
    var liList = ''
    for (var i in optionObjs) {
      var _optionObj = optionObjs[i]
      var _option = _optionObj.label
      if (hideOption === '1') {
        var endIndex = _optionObj.label.indexOf("《") > -1 ? 2 : 1
        _option = _optionObj.label.substring(0, endIndex)
      }
      liList += "<li id='" + _optionObj.key + "' class='option' onclick='markSelected(this)'>" + _option + "</li>"
      keySeq.push(_optionObj.key)
    }
    if (Persistence.isAvailable()) {
      Persistence.setItem('ANKI-OPTIONS-ORDER', keySeq.toString())
    }
    if (delayOption === '1') {
      isDelayOptionComing = true
      setTimeout(function () {
        document.getElementById("front-options").innerHTML = liList
        isDelayOptionComing = false
      }, 1500)
    } else {
      if (isDelayOptionComing) {
        setTimeout(function () {
          document.getElementById("front-options").innerHTML = liList
        }, 1500)
      } else {
        document.getElementById("front-options").innerHTML = liList
      }
    }
  }

  function initEmptyOptionList(optionObjs) {
    var liList = ''
    for (var i in optionObjs) {
      liList += "<li class='option'></li>"
    }
    document.getElementById("front-options").innerHTML = liList
  }

  function getOptionObjs(randomOption) {
    var optionArray = '{{options}}'.trim().split("||")
    var optionObjs = []
    for (var i in optionArray) {
      optionObjs.push({
        key: Number.parseInt(i) + 1,
        label: optionArray[i]
      })
    }
    if (randomOption === '1') {
      for (let i = 1; i < optionObjs.length; i++) {
        const random = Math.floor(Math.random() * (i + 1))
        const temp = optionObjs[i]
        optionObjs[i] = optionObjs[random]
        optionObjs[random] = temp
      }
    }
    return optionObjs
  }

  function getSelectedKey() {
    return normalOption === '1' ? 'selected' : 'selected-light'
  }

  function markSelected(li) {
    var selectedKey = getSelectedKey()
    // 对应多选
    if ("{{answer}}".indexOf('||') > 0) {
      if (Persistence.isAvailable()) {
        var selectedArray = Persistence.getItem('ANKI-SELECTED') ? Persistence.getItem('ANKI-SELECTED').split(',') : []
        if (li.className.indexOf(selectedKey) > 0) {
          selectedArray.splice(selectedArray.indexOf(li.id), 1)
        } else {
          selectedArray.push(li.id)
        }
        selectedArray.sort()
        Persistence.setItem('ANKI-SELECTED', selectedArray.toString())
        if (selectedArray.length === "{{answer}}".trim().split('||').length && autoFlip === '1') {
          setTimeout(function () {
            flipToBack()
          }, 100)
        }
      }
      if (li.className.indexOf(selectedKey) > 0) {
        li.className = "option"
      } else {
        li.className = "option " + selectedKey
      }
    } else {
      // 单选
      for (var option of document.getElementsByClassName('option')) { option.className = 'option'}
      li.className = "option " + selectedKey
      if (Persistence.isAvailable()) {
        Persistence.setItem('ANKI-SELECTED', li.id)
      }
      if (autoFlip === '1') {
        setTimeout(function () {
          flipToBack()
        }, 100)
      }
    }
  }

  function flipToBack () {
    if (typeof pycmd !== "undefined") {
      pycmd("ans")
    } else if (typeof study !== "undefined") {
      study.drawAnswer()
    } else if (typeof AnkiDroidJS !== "undefined") {
      showAnswer()
    } else if (window.anki && window.sendMessage2) {
      window.sendMessage2("ankitap", "midCenter")
    }
  }

  function showTags () {
    var tags = "{{Tags}}"
    if (!tags) return
    tags = tags.split(' ')
    var tagList = '<span class="tag-title">标签: </span>'
    for (var tag of tags) {
      if (tag) {
        tagList += '<span class="single-tag">' + tag + '</span>'
      }
    }
    document.getElementById("front-tag").innerHTML = tagList
  }

  function showSettings() {
    document.getElementById("settingsModal").style.display = 'block'
  }

  function hideSettings() {
    document.getElementById("settingsModal").style.display = 'none'
  }

  function renameIOsSendMessage(){
    if (window['sendMessage']) {
      window['sendMessage2'] = window['sendMessage']
      window['sendMessage'] = null
    }
  }

  function applySettings() {
    if (Persistence.isAvailable()) {
      showQuestionType = Persistence.getItem('ANKI-SETTINGS-SHOW-QUESTION-TYPE') || DEFAULT_SHOW_QUESTION_TYPE
      hideOptions = Persistence.getItem('ANKI-SETTINGS-HIDE-OPTIONS') || DEFAULT_HIDE_OPTIONS
      randomOptions = Persistence.getItem('ANKI-SETTINGS-RANDOM-OPTIONS') || DEFAULT_RANDOM_OPTIONS
      delayOptions = Persistence.getItem('ANKI-SETTINGS-DELAY-OPTIONS') || DEFAULT_DELAY_OPTIONS
      normalOption = Persistence.getItem('ANKI-SETTINGS-NORMAL-OPTIONS') || DEFAULT_NORMAL_OPTIONS
      hideNotes = Persistence.getItem('ANKI-SETTINGS-HIDE-NOTES') || DEFAULT_HIDE_NOTES
      autoFlip = Persistence.getItem('ANKI-SETTINGS-AUTO-FLIP') || DEFAULT_AUTO_FLIP
      Persistence.setItem('ANKI-SELECTED', '')
    }
    document.getElementById('hide-option').checked = hideOptions === '1'
    document.getElementById('random-option').checked = randomOptions === '1'
    document.getElementById('show-type').checked = showQuestionType === '1'
    document.getElementById('delay-option').checked = delayOptions === '1'
    document.getElementById('normal-option').checked = normalOption === '1'
    document.getElementById('hide-notes').checked = hideNotes === '1'
    document.getElementById('auto-flip').checked = autoFlip === '1'
    showFrontOptions(hideOptions, randomOptions, delayOptions)
    dealQuestionType(showQuestionType)
  }

  function switchHideOption(input) {
    rerenderOptions(input, 'ANKI-SETTINGS-HIDE-OPTIONS')
  }

  function switchDelayOption(input) {
    rerenderOptions(input, 'ANKI-SETTINGS-DELAY-OPTIONS')
  }

  function switchRandomOption(input) {
    rerenderOptions(input, 'ANKI-SETTINGS-RANDOM-OPTIONS')
  }

  function switchNormalOption(input) {
    extractKeyFromInputAndSave(input, 'ANKI-SETTINGS-NORMAL-OPTIONS')
    var selectedKey = getSelectedKey()
    for (var option of document.getElementsByClassName('option')) {
      if (option.className.indexOf(' ') > -1) {
        option.className = "option " + selectedKey
      }
    }
  }

  function switchHideNotes(input) {
    extractKeyFromInputAndSave(input, 'ANKI-SETTINGS-HIDE-NOTES')
  }

  function switchShowType(input) {
    extractKeyFromInputAndSave(input, 'ANKI-SETTINGS-SHOW-QUESTION-TYPE')
    dealQuestionType(showQuestionType)
  }

  function switchAutoFlip(input) {
    extractKeyFromInputAndSave(input, 'ANKI-SETTINGS-AUTO-FLIP')
  }

  function extractKeyFromInputAndSave(input, persistKey) {
    var key = input.checked ? '1' : '0'
    if (Persistence.isAvailable()) {
      Persistence.setItem(persistKey, key)
      if (persistKey === 'ANKI-SETTINGS-RANDOM-OPTIONS' || persistKey === 'ANKI-SETTINGS-DELAY-OPTIONS' || persistKey === 'ANKI-SETTINGS-HIDE-OPTIONS') {
        Persistence.setItem('ANKI-SELECTED', '')
      }
    }
    if (persistKey === 'ANKI-SETTINGS-HIDE-OPTIONS') {
      hideOptions = key
    } else if (persistKey === 'ANKI-SETTINGS-DELAY-OPTIONS') {
      delayOptions = key
    } else if (persistKey === 'ANKI-SETTINGS-RANDOM-OPTIONS') {
      randomOptions = key
    } else if (persistKey === 'ANKI-SETTINGS-NORMAL-OPTIONS') {
      normalOption = key
    } else if (persistKey === 'ANKI-SETTINGS-SHOW-QUESTION-TYPE') {
      showQuestionType = key
    } else if (persistKey === 'ANKI-SETTINGS-HIDE-NOTES') {
      hideNotes = key
    } else if (persistKey === 'ANKI-SETTINGS-AUTO-FLIP') {
      autoFlip = key
    }
    return key
  }

  function rerenderOptions(input, persistKey) {
    extractKeyFromInputAndSave(input, persistKey)
    showFrontOptions(hideOptions, randomOptions, delayOptions, normalOption)
  }

  function dealQuestionType(showQuestionType) {
    if (showQuestionType === '1') {
      document.getElementById('questionType').innerHTML = "{{answer}}".indexOf('||') > -1 ? '【多选】' : '【单选】'
    } else {
      document.getElementById('questionType').innerHTML = ' '
    }
    if (Persistence.isAvailable()) {
      Persistence.setItem('ANKI-SETTINGS-SHOW-QUESTION-TYPE', showQuestionType)
    }
  }

  function addModelContent() {
    document.getElementById('settingsModal').innerHTML = '<div class="modal-content">\n' +
      '    <span class="close" onclick="hideSettings()">&times;</span>\n' +
      '    <div class="settings-block">\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">显示类型</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="show-type" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchShowType(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">隐藏选项</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="hide-option" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchHideOption(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">随机选项</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="random-option" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchRandomOption(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">延迟选项</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="delay-option" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchDelayOption(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">纯色模式</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="normal-option" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchNormalOption(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">隐藏解析</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="hide-notes" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchHideNotes(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '      <div class="single-setting">\n' +
      '        <div class="setting-label">自动翻转</div>\n' +
      '        <div class="setting-switch">\n' +
      '          <input id="auto-flip" class="mui-switch mui-switch-anim" type="checkbox" onchange="switchAutoFlip(this)">\n' +
      '        </div>\n' +
      '      </div>\n' +
      '    </div>\n' +
      '  </div>'
  }

  function updateFrontFooter() {
    document.getElementById("front-footer").insertAdjacentHTML('beforeend', '，<a href="javascript:showSettings();">卡片设置</a>，开源地址：<a href="https://github.com/git9527/anki-awesome-select">Github</a> | <a href="https://gitee.com/git9527/anki-awesome-select">Gitee</a>');
  }

  showTags()
  renameIOsSendMessage()
  addModelContent()
  applySettings()
  updateFrontFooter()

</script>