reading_comprehension.tpl 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <div id="question-{{ id }}" class="question-reading-comprehension-container">
  2. <div class="question-reading-comprehension-overlay"></div>
  3. <div id="question-{{ id }}-text" class="center-block question-reading-comprehension-text" onselectstart="return false">
  4. {{ text }}
  5. </div>
  6. </div>
  7. <style>
  8. .question-reading-comprehension-container {
  9. position: relative;
  10. }
  11. .question-reading-comprehension-container .question-reading-comprehension-overlay {
  12. bottom: 0;
  13. left: 0;
  14. position: absolute;
  15. right: 0;
  16. top: 0;
  17. }
  18. .question-reading-comprehension-text {
  19. text-align: justify;
  20. -webkit-touch-callout: none;
  21. -webkit-user-select: none;
  22. -khtml-user-select: none;
  23. -moz-user-select: none;
  24. -ms-user-select: none;
  25. user-select: none;
  26. }
  27. .question-reading-comprehension-text .text-highlight {
  28. color: transparent;
  29. -webkit-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  30. -khtml-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  31. -moz-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  32. -ms-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  33. text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  34. -webkit-transition: color .5s linear, text-shadow .5s linear;
  35. -khtml-transition: color .5s linear, text-shadow .5s linear;
  36. -moz-transition: color .5s linear, text-shadow .5s linear;
  37. -ms-transition: color .5s linear, text-shadow .5s linear;
  38. transition: color .5s linear, text-shadow .5s linear;
  39. }
  40. .question-reading-comprehension-text .text-highlight.active {
  41. color: #000;
  42. -webkit-text-shadow: none;
  43. -khtml-text-shadow: none;
  44. -moz-text-shadow: none;
  45. -ms-text-shadow: none;
  46. text-shadow: none;
  47. -webkit-transition: color .5s linear, text-shadow .5s linear;
  48. -khtml-transition: color .5s linear, text-shadow .5s linear;
  49. -moz-transition: color .5s linear, text-shadow .5s linear;
  50. -ms-transition: color .5s linear, text-shadow .5s linear;
  51. transition: color .5s linear, text-shadow .5s linear;
  52. }
  53. .question-reading-comprehension-text .text-highlight.border {
  54. color: #bbb;
  55. -webkit-text-shadow: none;
  56. -khtml-text-shadow: none;
  57. -moz-text-shadow: none;
  58. -ms-text-shadow: none;
  59. text-shadow: none;
  60. -webkit-transition: color .5s linear, text-shadow .5s linear;
  61. -khtml-transition: color .5s linear, text-shadow .5s linear;
  62. -moz-transition: color .5s linear, text-shadow .5s linear;
  63. -ms-transition: color .5s linear, text-shadow .5s linear;
  64. transition: color .5s linear, text-shadow .5s linear;
  65. }
  66. .question-reading-comprehension-text br {
  67. margin-bottom: 1em;
  68. }
  69. .radio.hide-reading-answers, .question_title.hide-reading-answers {
  70. display: none;
  71. }
  72. </style>
  73. <script>
  74. $(document).on('ready', function () {
  75. var index = 0,
  76. $questionTexts = $('#question-{{ id }}-text .text-highlight'),
  77. total = $questionTexts.length;
  78. function updateView()
  79. {
  80. $questionTexts.removeClass('active border');
  81. if (index == total - 1) {
  82. $('#question_div_{{ id }} .radio, #question_div_{{ id }} .question_title').removeClass('hide-reading-answers');
  83. }
  84. if (index >= total) {
  85. window.clearInterval(timeOuId);
  86. return;
  87. }
  88. var prev = index > 0 ? $('#question-{{ id }}-text .text-highlight').get(index - 1) : null,
  89. current = $questionTexts.get(index),
  90. next = index < total ? $('#question-{{ id }}-text .text-highlight').get(index + 1) : null;
  91. $(current).addClass('active');
  92. if (prev) {
  93. $(prev).addClass('border');
  94. }
  95. if (next) {
  96. $(next).addClass('border');
  97. }
  98. index++;
  99. }
  100. updateView();
  101. var timeOuId = window.setInterval(updateView, {{ refresh_time }} * 1000);
  102. });
  103. </script>