Anki Movie Template

In this example below you will see how to do a Anki Movie Template with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by xengil, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright xengil ©
  • HTML
  • CSS
  • JavaScript
    <div class="card">
  <div class="media"><img src="Demolition_2016_1_0.35.28.419.jpg"></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.21.510-0.35.23.921.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.21.510-0.35.23.921.mp3]</span></span><span class="color_one">You. What are you doing here?</span></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.23.630-0.35.26.325.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.23.630-0.35.26.325.mp3]</span></span><span class="color_two">I'm here to see Karen Moreno. What are you doing here?</span></div>
  <span>['What', 'am', 'I', 'doing', 'here', '?']</span>
  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.25.950-0.35.27.644.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.25.950-0.35.27.644.mp3]</span></span><span class="color_three">What am I doing here?</span></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.27.310-0.35.29.528.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.27.310-0.35.29.528.mp3]</span></span> <span class="expression">Why am I <i>holding</i> a check for <b>$500,000</b>? I told...</span></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.29.110-0.35.31.248.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.29.110-0.35.31.248.mp3]</span></span><span class="color_one">Well... You don't have to swear, Carl.</span></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.30.830-0.35.32.666.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.30.830-0.35.32.666.mp3]</span></span><span class="color_two">I told you I have a customer service issue.</span></div>

  <div class="helping_expression"><span class="helping_expression_audio"><a href='javascript:py.link("ankiplayDemolition_2016_1_0.35.32.190-0.35.33.725.mp3");' title="Replay" class="replaybutton browserhide"><span><svg viewBox="0 0 32 32"><polygon points="11,25 25,16 11,7"></polygon>Replay</svg></span></a><span style="display: none;">[sound:Demolition_2016_1_0.35.32.190-0.35.33.725.mp3]</span></span><span class="color_three">What...</span></div>
</div>

/*Downloaded from https://www.codeseek.co/xengil/anki-movie-template-KZeeZO */
    .replaybutton span {
  display: inline-block;
  vertical-align: middle;
  padding: 5px;
}

.replaybutton span svg {
  stroke: none;
  fill: black;
  display: inline;
  height: 1em;
  width: 1em;
  min-width: 12px;
  min-height: 12px;
}


/*Downloaded from https://www.codeseek.co/xengil/anki-movie-template-KZeeZO */
    var regex = /(?:\b[^\s]+\b)(?:(?<=\.\w).)?/g;
var str = document.querySelector(".expression");

str.innerHTML = str.innerText.replace(
  regex,
  '<a class="expression-hints" data-text="$1">___</a>'
);

var gaps = document.querySelectorAll(".expression-hints");

[].forEach.call(gaps, function(gap) {
  gap.addEventListener("click", function(e) {
    e.preventDefault();
    var el = this;
    if (!el.classList.contains("visible")) {
      el.innerHTML = this.dataset.text;
      el.classList.add("visible");
    }
  });
});

Comments