Want more features on Pastebin? Sign Up, it's FREE!
Guest

Core 2k6k card layout -- Question side

By: a guest on Apr 26th, 2012  |  syntax: HTML  |  size: 2.18 KB  |  views: 98  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!--This doesn't appear on the card; we just want to steal its content later -->
  2. <div id="image" style="display:none">{{{Sentence-Image}}}</div>
  3.  
  4. <div id="questionContainer">
  5.     <div id="sentenceClozed">{{{Sentence-Clozed}}}</div>
  6.     <div id="sentenceEnglish">{{{Sentence-English}}}</div>
  7. </div>
  8.  
  9. <script>
  10. // Get the image path. Assuming it's a .jpg.
  11. var img = document.getElementById("image");
  12. var start = img.innerHTML.indexOf("src=\"") +5;
  13. var end = img.innerHTML.indexOf(".jpg\"");
  14. var imgPath = img.innerHTML.substring(start, end) + ".jpg";
  15.  
  16. // And make it the background image
  17. document.body.style.backgroundImage='url('+imgPath+')';
  18.  
  19. // Fill in the clozed portion with its English meaning
  20. var eng = '{{{Vocabulary-English}}}'
  21. var cloze = document.getElementById("sentenceClozed");
  22. cloze.innerHTML = cloze.innerHTML.replace(/( )/, "「"+eng+"」");
  23. </script>
  24.  
  25. <style type="text/css">
  26. body
  27. {
  28.   background-color:#000;
  29.   background-size:cover;
  30.   background-repeat:no-repeat;
  31.   background-position: 25% 25%;
  32.   margin:0px;
  33.   padding:0px;
  34.   height:100%;
  35. }
  36.  
  37. /*Question card*/
  38. #questionContainer
  39. {
  40.   padding: 10px;
  41.   border-radius: 22;
  42.   background-color: rgba(0,0,0,0.7);
  43.   margin-left: 5%;
  44.   margin-right: 5%;
  45. }
  46.  
  47. #sentenceClozed
  48. {
  49.   color: #ed9;
  50.   font-size: 1.3em;
  51. }
  52.  
  53. #sentenceClozed b, #sentenceClozed [style="font-weight: bold;"]
  54. {
  55.   color: #f0b570;
  56.   background-color: rgba(0,0,0,0.2);
  57. }
  58.  
  59. #sentenceEnglish
  60. {
  61.   font-size: 1.1em;
  62.   color: #dfb;
  63.   margin-top: 10px;
  64. }
  65.  
  66. /*Answer card*/
  67. #answerContainer
  68. {
  69.   border-radius: 22;
  70.   background-color: rgba(0,0,0,0.7);
  71.   padding: 10px;
  72.   margin-left: 5%;
  73.   margin-right: 5%;
  74. }
  75.  
  76. #vocabFurigana
  77. {
  78.   font-size: 1.5em;
  79.   color: #f90;
  80.   padding-bottom: 10px;
  81. }
  82.  
  83. #reading
  84. {
  85.   font-size: 1.5em;
  86.   color: #ed9;
  87. }
  88.  
  89. #reading b, #reading [style="font-weight: bold;"]
  90. {
  91.   color: #f0b570;
  92.   background-color: rgba(0,0,0,0.2);
  93. }
  94.  
  95. #other
  96. {
  97.   margin-top:1em;
  98. }
  99.  
  100. #notes
  101. {
  102.   font-size: .7em;
  103.   color: #fff;
  104.   margin-top: 1em;
  105. }
  106.  
  107. /*Audio images for ankidroid*/
  108. #sentenceAudio img
  109. {
  110.   width: 50%;
  111.   margin-right:5px;
  112. }
  113. #vocabAudio img
  114. {
  115.   width: 50%;
  116.   margin-left:5px;
  117. }
  118. </style>
clone this paste RAW Paste Data