Advertisement
Guest User

Fallback cards

a guest
Mar 4th, 2021
545
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. #########Front#######
  2. <div id='flip' data-line='{{Sentence}}'><span>{{Expression}}</span></div>
  3. <div style='font-size: 17px;'>{{Hint}}</div>
  4.  
  5. <script>
  6. //handle html that anki may put into the sentence field
  7. var s = document.getElementById("flip").dataset.line;
  8. if (s.length > 0) {
  9. s = s.replace(/<br>|<div>/ig, '\r\n');
  10. s = s.replace(/<[^<]*>/ig, '');
  11. document.getElementById("flip").dataset.line = s;
  12.  
  13. //https://ankiweb.net/shared/info/1642550423
  14. document.addEventListener("keyup", e=>{
  15. if(e.shiftKey) {
  16. if(document.getElementById("flip").classList.contains("hover"))
  17. document.getElementById("flip").classList.remove("hover");
  18. else
  19. document.getElementById("flip").classList.add("hover");
  20. }
  21. });
  22. }
  23. </script>
  24. #########Front#######
  25.  
  26. #########Back########
  27. {{FrontSide}}
  28. <div style='font-size: 30px;'>{{Reading}}</div>
  29. <hr id=answer>
  30. <div style='font-size: 25px;'>{{Glossary}}</div>
  31. <div style='font-size: 15px;'><br/></div>
  32. <div style='font-size: 20px;'>{{Picture}}</div>
  33. <div style='font-size: 25px;'>{{Sentence}}</div>
  34. <div style='font-size: 20px;'>{{Pitch}}</div>
  35. <div style='font-size: 20px;'>{{Audio}}</div>
  36. #########Back########
  37.  
  38. #########Styling#########
  39. .card {
  40. //whatever you like here
  41. }
  42.  
  43. #flip[data-line]::after {
  44. position:absolute;
  45. font-size: 50%;
  46. content: "⇵";
  47. }
  48.  
  49. #flip[data-line=""]::after {
  50. content: "";
  51. }
  52.  
  53. #flip[data-line]:hover span, .hover[data-line] span {
  54. display:none;
  55. }
  56.  
  57. #flip[data-line=""]:hover span, .hover[data-line=""] span {
  58. display:block;
  59. }
  60.  
  61. #flip:hover::before, .hover::before {
  62. content: attr(data-line);
  63. white-space: pre;
  64. }
  65. #########Styling#########
Advertisement
RAW Paste Data Copied
Advertisement