Advertisement
Guest User

Untitled

a guest
Mar 23rd, 2019
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.58 KB | None | 0 0
  1. <template>
  2. <div class="container">
  3. <div class="row justify-content-center">
  4. <div class="col-md-12">
  5. <div class="card card-default">
  6. <div class="card-body">
  7. <div id="word-section">
  8. <div class="waiting">⌛</div>
  9. </div>
  10. <div id="type-section">
  11. <input v-model="typedWord"
  12. class="form-control"
  13. type="text"
  14. tabindex="1"
  15. autofocus
  16. @keyup="typingTest"/>
  17.  
  18. <div class="type-btn">
  19. <span>{{ timer }}</span>
  20. </div>
  21.  
  22. <button class="type-btn" tabindex="2" @click="restartTest">
  23. <span id="restart-symbol">↻</span>
  24. </button>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </template>
  32.  
  33. <script>
  34. export default {
  35. data () {
  36. return {
  37. typedWord: '',
  38. submitted: false,
  39. wordData: {
  40. seconds: 60,
  41. correct: 0,
  42. incorrect: 0,
  43. total: 0,
  44. typed: 0,
  45. },
  46. timer: '1:00',
  47. wordList: [
  48. 'the', 'name', 'of', 'very', 'to', 'through', 'and', 'just', 'a',
  49. 'form', 'in', 'much', 'is', 'great', 'it', 'think', 'you', 'say',
  50. 'that', 'help', 'he', 'low', 'was', 'line', 'for', 'before', 'on',
  51. 'turn', 'are', 'cause', 'with', 'same', 'as', 'mean', 'I', 'differ',
  52. 'his', 'move', 'they', 'right', 'be', 'boy', 'at', 'old', 'one',
  53. 'too', 'have', 'does', 'this', 'tell', 'from', 'sentence', 'or',
  54. 'set', 'had', 'three', 'by', 'want', 'hot', 'air', 'but', 'well',
  55. 'some', 'also', 'what', 'play', 'there', 'small', 'we', 'end', 'can',
  56. 'put', 'out', 'home', 'other', 'read', 'were', 'hand', 'all', 'port',
  57. 'your', 'large', 'when', 'spell', 'up', 'add', 'use', 'even', 'word',
  58. 'land', 'how', 'here', 'said', 'must', 'an', 'big', 'each', 'high',
  59. 'she', 'such', 'which', 'follow', 'do', 'act', 'their', 'why', 'time',
  60. 'ask', 'if', 'men', 'will', 'change', 'way', 'went', 'about', 'light',
  61. 'many', 'kind', 'then', 'off', 'them', 'need', 'would', 'house',
  62. 'write', 'picture', 'like', 'try', 'so', 'us', 'these', 'again',
  63. 'her', 'animal', 'long', 'point', 'make', 'mother', 'thing', 'world',
  64. 'see', 'near', 'him', 'build', 'two', 'self', 'has', 'earth', 'look',
  65. 'father', 'more', 'head', 'day', 'stand', 'could', 'own', 'go',
  66. 'page', 'come', 'should', 'did', 'country', 'my', 'found', 'sound',
  67. 'answer', 'no', 'school', 'most', 'grow', 'number', 'study', 'who',
  68. 'still', 'over', 'learn', 'know', 'plant', 'water', 'cover', 'than',
  69. 'food', 'call', 'sun', 'first', 'four', 'people', 'thought', 'may',
  70. 'let', 'down', 'keep', 'side', 'eye', 'been', 'never', 'now', 'last',
  71. 'find', 'door', 'any', 'between', 'new', 'city', 'work', 'tree',
  72. 'part', 'cross', 'take', 'since', 'get', 'hard', 'place', 'start',
  73. 'made', 'might', 'live', 'story', 'where', 'saw', 'after', 'far',
  74. 'back', 'sea', 'little', 'draw', 'only', 'left', 'round', 'late',
  75. 'man', 'run', 'year', 'don\'t', 'came', 'while', 'show', 'press',
  76. 'every', 'close', 'good', 'night', 'me', 'real', 'give', 'life',
  77. 'our', 'few', 'under', 'stop', 'open', 'ten', 'seem', 'simple',
  78. 'together', 'several', 'next', 'vowel', 'white', 'toward', 'children',
  79. 'war', 'begin', 'lay', 'got', 'against', 'walk', 'pattern', 'example',
  80. 'slow', 'ease', 'center', 'paper', 'love', 'often', 'person',
  81. 'always', 'money', 'music', 'serve', 'those', 'appear', 'both',
  82. 'road', 'mark', 'map', 'book', 'science', 'letter', 'rule', 'until',
  83. 'govern', 'mile', 'pull', 'river', 'cold', 'car', 'notice', 'feet',
  84. 'voice', 'care', 'fall', 'second', 'power', 'group', 'town', 'carry',
  85. 'fine', 'took', 'certain', 'rain', 'fly', 'eat', 'unit', 'room',
  86. 'lead', 'friend', 'cry', 'began', 'dark', 'idea', 'machine', 'fish',
  87. 'note', 'mountain', 'wait', 'north', 'plan', 'once', 'figure', 'base',
  88. 'star', 'hear', 'box', 'horse', 'noun', 'cut', 'field', 'sure',
  89. 'rest', 'watch', 'correct', 'color', 'able', 'face', 'pound', 'wood',
  90. 'done', 'main', 'beauty', 'enough', 'drive', 'plain', 'stood', 'girl',
  91. 'contain', 'usual', 'front', 'young', 'teach', 'ready', 'week',
  92. 'above', 'final', 'ever', 'gave', 'red', 'green', 'list', 'oh',
  93. 'though', 'quick', 'feel', 'develop', 'talk', 'sleep', 'bird', 'warm',
  94. 'soon', 'free', 'body', 'minute', 'dog', 'strong', 'family',
  95. 'special', 'direct', 'mind', 'pose', 'behind', 'leave', 'clear',
  96. 'song', 'tail', 'measure', 'produce', 'state', 'fact', 'product',
  97. 'street', 'black', 'inch', 'short', 'lot', 'numeral', 'nothing',
  98. 'class', 'course', 'wind', 'stay', 'question', 'wheel', 'happen',
  99. 'full', 'complete', 'force', 'ship', 'blue', 'area', 'object', 'half',
  100. 'decide', 'rock', 'surface', 'order', 'deep', 'fire', 'moon', 'south',
  101. 'island', 'problem', 'foot', 'piece', 'yet', 'told', 'busy', 'knew',
  102. 'test', 'pass', 'record', 'farm', 'boat', 'top', 'common', 'whole',
  103. 'gold', 'king', 'possible', 'size', 'plane', 'heard', 'age', 'best',
  104. 'dry', 'hour', 'wonder', 'better', 'laugh', 'true', 'thousand',
  105. 'during', 'ago', 'hundred', 'ran', 'am', 'check', 'remember', 'game',
  106. 'step', 'shape', 'early', 'yes', 'hold', 'hot', 'west', 'miss',
  107. 'ground', 'brought', 'interest', 'heat', 'reach', 'snow', 'fast',
  108. 'bed', 'five', 'bring', 'sing', 'sit', 'listen', 'perhaps', 'six',
  109. 'fill', 'table', 'east', 'travel', 'weight', 'less', 'language',
  110. 'morning', 'among',
  111. ],
  112. }
  113. },
  114. computed: {},
  115. mounted () {
  116. this.addWords()
  117. },
  118.  
  119. methods: {
  120. typingTest (e) {
  121. // Char: Key Code:
  122. // <space> 32
  123. // <backspace> 8
  124. // <shift> 16
  125. // [A-Z] 65-90
  126. // [' "] 222
  127. e = e || window.event
  128. let kCode = e.keyCode
  129. if (this.typedWord.match(/^\s/g)) {
  130. this.typedWord = ''
  131. return false
  132. }
  133.  
  134. if (this.isTimer(this.wordData.seconds)) {
  135. this.checkWord(this.typedWord)
  136. if (kCode === 32) {
  137. this.submitWord(this.typedWord)
  138. this.clearLine()
  139. this.typedWord = ''
  140. }
  141. this.wordData.typed += 1
  142. if (this.wordData.typed === 30) {
  143. let element = document.getElementById('word-section')
  144. let currentScroll = element.scrollTop
  145. element.scrollTop = currentScroll + 20
  146. }
  147. } else {
  148. this.calculateWPM()
  149. }
  150. },
  151. isTimer (seconds) {
  152. let time = seconds
  153. let one = this.timer
  154. if (this.timer === '1:00') {
  155. let typingTimer = setInterval(() => {
  156. if (time <= 0) {
  157. clearInterval(typingTimer)
  158. } else {
  159. time -= 1
  160. let timePad = (time < 10) ? ('0' + time) : time
  161. this.timer = `0:${timePad}`
  162. }
  163. }, 1000)
  164. }
  165.  
  166. return one !== '0:00'
  167. },
  168.  
  169. addWords () {
  170. let wordSection = document.getElementById('word-section')
  171. this.typedWord = ''
  172. wordSection.innerHTML = ''
  173.  
  174. for (let i = 350; i > 0; i--) {
  175. let words = this.shuffle(this.wordList)
  176. let wordSpan = `<span>${words[i]}</span>`
  177. wordSection.innerHTML += wordSpan
  178. }
  179. wordSection.firstChild.classList.add('current-word')
  180. },
  181. checkWord (word) {
  182. let wordLength = word.length
  183. let current = document.getElementsByClassName('current-word')[0]
  184. let currentSubstring = current.innerHTML.substring(0, wordLength)
  185. if (word.trim() !== currentSubstring) {
  186. current.classList.add('incorrect-word-bg')
  187. return false
  188. }
  189.  
  190. current.classList.remove('incorrect-word-bg')
  191. return true
  192. },
  193. shuffle (array) {
  194. let m = array.length, t, i
  195. while (m) {
  196. i = Math.floor(Math.random() * m--)
  197. t = array[m]
  198. array[m] = array[i]
  199. array[i] = t
  200. }
  201. return array
  202. },
  203. submitWord (word) {
  204. let current = document.getElementsByClassName('current-word')[0]
  205.  
  206. if (this.checkWord(word)) {
  207. current.classList.remove('current-word')
  208. current.classList.add('correct-word-c')
  209. this.wordData.correct += 1
  210. } else {
  211. current.classList.remove('current-word', 'incorrect-word-bg')
  212. current.classList.add('incorrect-word-c')
  213. this.wordData.incorrect += 1
  214. }
  215. this.wordData.total = this.wordData.correct + this.wordData.incorrect
  216. if (this.wordData.total % 7 === 0) {
  217. document.getElementById('word-section').scrollTop = current.nextSibling.offsetTop
  218. }
  219. current.nextSibling.classList.add('current-word')
  220. },
  221. clearLine () {
  222. let wordSection = document.getElementById('word-section')
  223. let current = document.getElementsByClassName('current-word')[0]
  224. let previous = current.previousSibling
  225. let children = document.querySelectorAll('.correct-word-c, .incorrect-word-c')[0].length
  226.  
  227. if (current.offsetTop > previous.offsetTop) {
  228. for (let i = 0; i < children; i++) {
  229. wordSection.removeChild(wordSection.firstChild)
  230. }
  231. }
  232. },
  233. calculateWPM () {
  234. let {seconds, correct, incorrect, total, typed} = this.wordData
  235. let minutes = (seconds / 60)
  236. let wpm = Math.ceil((typed / 5) - (incorrect) / minutes)
  237. let accuracy = Math.ceil((correct / total) * 100)
  238.  
  239. if (wpm < 0) {
  240. wpm = 0
  241. }
  242.  
  243. document.getElementById('word-section').innerHTML = `<ul id="results">
  244. <li>WPM: <span class="wpm-value">${wpm}</span></li>
  245. <li>Accuracy: <span class="wpm-accuracy">${accuracy}%</span></li>
  246. <li id="results-stats">
  247. Total Words: <span>${total}</span> |
  248. Correct Words: <span>${correct}</span> |
  249. Incorrect Words: <span>${incorrect}</span> |
  250. Characters Typed: <span>${typed}</span>
  251. </li>
  252. </ul>`
  253.  
  254. let wpmClass = document.getElementsByClassName('wpm-accuracy')[0].classList
  255. if (accuracy > 80) {
  256. wpmClass.add('correct-word-c')
  257. } else {
  258. wpmClass.add('incorrect-word-c')
  259. }
  260.  
  261. if (!this.submitted) {
  262. window.axios.post('/submit-test', {
  263. words_per_minute: wpm,
  264. accuracy: accuracy,
  265. total_words: total,
  266. correct_words: correct,
  267. incorrect_words: incorrect,
  268. characters_typed: typed,
  269. }).then((response) => {
  270. console.log(response)
  271. this.submitted = true
  272. }).catch((response) => {
  273. console.log(response)
  274. })
  275.  
  276. }
  277. },
  278. restartTest () {
  279. this.typedWord = ''
  280. location.reload()
  281. },
  282. },
  283. }
  284. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement