Interactive tool to learn and practice the Major Mnemonic System for memorizing numbers
Size
20.6 KB
Version
1.1.1
Created
Nov 20, 2025
Updated
26 days ago
1// ==UserScript==
2// @name Major Mnemonic System Trainer
3// @description Interactive tool to learn and practice the Major Mnemonic System for memorizing numbers
4// @version 1.1.1
5// @match https://*.google.com/*
6// @icon https://www.gstatic.com/images/branding/searchlogo/ico/favicon.ico
7// ==/UserScript==
8(function() {
9 'use strict';
10
11 // Major System mapping: digit -> consonant sounds
12 const majorSystem = {
13 0: { sounds: 's, z, soft c', examples: 'sun, zoo, city', explanation: 'S and Z sounds' },
14 1: { sounds: 't, d, th', examples: 'tea, day, think', explanation: 'T and D sounds (one downstroke)' },
15 2: { sounds: 'n', examples: 'no, knee, gnu', explanation: 'N sound (two downstrokes)' },
16 3: { sounds: 'm', examples: 'ma, me, ham', explanation: 'M sound (three downstrokes)' },
17 4: { sounds: 'r', examples: 'ray, rye, arrow', explanation: 'R sound (last letter of "four")' },
18 5: { sounds: 'l', examples: 'law, lie, yellow', explanation: 'L sound (Roman numeral L = 50)' },
19 6: { sounds: 'j, sh, ch, soft g', examples: 'jaw, shoe, church, gym', explanation: 'J, SH, CH sounds' },
20 7: { sounds: 'k, hard c, hard g, q', examples: 'key, cow, go, queen', explanation: 'K and hard G sounds' },
21 8: { sounds: 'f, v, ph', examples: 'fee, view, phone', explanation: 'F and V sounds (script f looks like 8)' },
22 9: { sounds: 'p, b', examples: 'pie, bee, apple', explanation: 'P and B sounds (mirror of 9)' }
23 };
24
25 // Major System 00-99 words
26 const majorWords = {
27 0: 'sauce', 1: 'suit', 2: 'sun', 3: 'sum', 4: 'sore', 5: 'sail', 6: 'sash', 7: 'sock', 8: 'safe', 9: 'soap',
28 10: 'toes', 11: 'tot', 12: 'tin', 13: 'tomb', 14: 'tire', 15: 'tail', 16: 'dish', 17: 'tack', 18: 'dove', 19: 'tub',
29 20: 'nose', 21: 'net', 22: 'nun', 23: 'name', 24: 'Nero', 25: 'nail', 26: 'notch', 27: 'neck', 28: 'knife', 29: 'knob',
30 30: 'mouse', 31: 'mat', 32: 'moon', 33: 'mummy', 34: 'mower', 35: 'mail', 36: 'match', 37: 'mug', 38: 'movie', 39: 'mop',
31 40: 'rose', 41: 'rat', 42: 'rain', 43: 'ram', 44: 'rower', 45: 'rail', 46: 'rash', 47: 'rock', 48: 'roof', 49: 'rope',
32 50: 'lace', 51: 'light', 52: 'lion', 53: 'lime', 54: 'lure', 55: 'lily', 56: 'leech', 57: 'lock', 58: 'lava', 59: 'lip',
33 60: 'cheese', 61: 'sheet', 62: 'chain', 63: 'chime', 64: 'cherry', 65: 'jail', 66: 'judge', 67: 'chalk', 68: 'chef', 69: 'ship',
34 70: 'case', 71: 'cat', 72: 'coin', 73: 'comb', 74: 'car', 75: 'coal', 76: 'cage', 77: 'cake', 78: 'cave', 79: 'cap',
35 80: 'fuse', 81: 'foot', 82: 'fan', 83: 'foam', 84: 'fire', 85: 'file', 86: 'fish', 87: 'fog', 88: 'fife', 89: 'fob',
36 90: 'bus', 91: 'bat', 92: 'bone', 93: 'bomb', 94: 'bear', 95: 'bell', 96: 'beach', 97: 'book', 98: 'beef', 99: 'pipe'
37 };
38
39 // Practice modes
40 let currentMode = 'learn';
41 let currentDigit = 0;
42 let score = 0;
43 let totalQuestions = 0;
44
45 function createMainUI() {
46 const container = document.createElement('div');
47 container.id = 'major-mnemonic-trainer';
48 container.style.cssText = `
49 position: fixed;
50 top: 20px;
51 right: 20px;
52 width: 400px;
53 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
54 border-radius: 16px;
55 box-shadow: 0 10px 40px rgba(0,0,0,0.3);
56 z-index: 10000;
57 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
58 color: white;
59 `;
60
61 container.innerHTML = `
62 <div style="padding: 20px;">
63 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
64 <h2 style="margin: 0; font-size: 20px; font-weight: 600;">Major System Trainer</h2>
65 <button id="mm-close" style="background: rgba(255,255,255,0.2); border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;">×</button>
66 </div>
67
68 <div style="display: flex; gap: 8px; margin-bottom: 20px;">
69 <button id="mm-learn-mode" class="mm-mode-btn" style="flex: 1; padding: 10px; background: rgba(255,255,255,0.3); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 13px;">Sounds</button>
70 <button id="mm-words-mode" class="mm-mode-btn" style="flex: 1; padding: 10px; background: rgba(255,255,255,0.1); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 13px;">Words</button>
71 <button id="mm-practice-mode" class="mm-mode-btn" style="flex: 1; padding: 10px; background: rgba(255,255,255,0.1); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 13px;">Practice</button>
72 <button id="mm-test-mode" class="mm-mode-btn" style="flex: 1; padding: 10px; background: rgba(255,255,255,0.1); border: none; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; transition: all 0.3s; font-size: 13px;">Test</button>
73 </div>
74
75 <div id="mm-content" style="background: rgba(255,255,255,0.15); border-radius: 12px; padding: 20px; min-height: 300px; backdrop-filter: blur(10px);">
76 <!-- Content will be inserted here -->
77 </div>
78
79 <div id="mm-score" style="margin-top: 15px; text-align: center; font-size: 14px; opacity: 0.9; display: none;">
80 Score: <span id="mm-score-value">0/0</span> (<span id="mm-score-percent">0%</span>)
81 </div>
82 </div>
83 `;
84
85 document.body.appendChild(container);
86
87 // Event listeners
88 document.getElementById('mm-close').addEventListener('click', () => {
89 container.style.display = 'none';
90 });
91
92 document.getElementById('mm-learn-mode').addEventListener('click', () => switchMode('learn'));
93 document.getElementById('mm-words-mode').addEventListener('click', () => switchMode('words'));
94 document.getElementById('mm-practice-mode').addEventListener('click', () => switchMode('practice'));
95 document.getElementById('mm-test-mode').addEventListener('click', () => switchMode('test'));
96
97 // Initialize with learn mode
98 switchMode('learn');
99
100 console.log('Major Mnemonic System Trainer initialized');
101 }
102
103 function switchMode(mode) {
104 currentMode = mode;
105
106 // Update button styles
107 document.querySelectorAll('.mm-mode-btn').forEach(btn => {
108 btn.style.background = 'rgba(255,255,255,0.1)';
109 });
110
111 if (mode === 'learn') {
112 document.getElementById('mm-learn-mode').style.background = 'rgba(255,255,255,0.3)';
113 showLearnMode();
114 } else if (mode === 'words') {
115 document.getElementById('mm-words-mode').style.background = 'rgba(255,255,255,0.3)';
116 showWordsMode();
117 } else if (mode === 'practice') {
118 document.getElementById('mm-practice-mode').style.background = 'rgba(255,255,255,0.3)';
119 showPracticeMode();
120 } else if (mode === 'test') {
121 document.getElementById('mm-test-mode').style.background = 'rgba(255,255,255,0.3)';
122 showTestMode();
123 }
124 }
125
126 function showLearnMode() {
127 const content = document.getElementById('mm-content');
128 document.getElementById('mm-score').style.display = 'none';
129
130 let html = '<div style="max-height: 400px; overflow-y: auto;">';
131 html += '<h3 style="margin-top: 0; margin-bottom: 15px; font-size: 16px;">Number to Sound Mapping</h3>';
132
133 for (let digit = 0; digit <= 9; digit++) {
134 const info = majorSystem[digit];
135 html += `
136 <div style="background: rgba(255,255,255,0.1); border-radius: 8px; padding: 15px; margin-bottom: 12px; border-left: 4px solid rgba(255,255,255,0.5);">
137 <div style="display: flex; align-items: center; margin-bottom: 8px;">
138 <div style="background: rgba(255,255,255,0.3); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; margin-right: 15px;">${digit}</div>
139 <div style="flex: 1;">
140 <div style="font-weight: 600; font-size: 16px; margin-bottom: 4px;">${info.sounds}</div>
141 <div style="font-size: 13px; opacity: 0.9;">${info.explanation}</div>
142 </div>
143 </div>
144 <div style="font-size: 13px; opacity: 0.85; font-style: italic;">Examples: ${info.examples}</div>
145 </div>
146 `;
147 }
148
149 html += '</div>';
150 content.innerHTML = html;
151 }
152
153 function showWordsMode() {
154 const content = document.getElementById('mm-content');
155 document.getElementById('mm-score').style.display = 'none';
156
157 let html = '<div style="max-height: 400px; overflow-y: auto;">';
158 html += '<h3 style="margin-top: 0; margin-bottom: 15px; font-size: 16px;">Major System: 00-99 Words</h3>';
159 html += '<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;">';
160
161 for (let num = 0; num < 100; num++) {
162 const word = majorWords[num];
163 const numStr = num.toString().padStart(2, '0');
164 html += `
165 <div style="background: rgba(255,255,255,0.1); border-radius: 6px; padding: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s;"
166 onmouseover="this.style.background='rgba(255,255,255,0.2)'"
167 onmouseout="this.style.background='rgba(255,255,255,0.1)'">
168 <div style="background: rgba(255,255,255,0.3); min-width: 35px; height: 35px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold;">${numStr}</div>
169 <div style="font-size: 15px; font-weight: 500;">${word}</div>
170 </div>
171 `;
172 }
173
174 html += '</div></div>';
175 content.innerHTML = html;
176 }
177
178 function showPracticeMode() {
179 document.getElementById('mm-score').style.display = 'block';
180 updateScore();
181 showPracticeQuestion();
182 }
183
184 function showPracticeQuestion() {
185 const practiceType = Math.random() < 0.5 ? 'sound' : 'word';
186
187 if (practiceType === 'sound') {
188 currentDigit = Math.floor(Math.random() * 10);
189
190 const content = document.getElementById('mm-content');
191 content.innerHTML = `
192 <div style="text-align: center;">
193 <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 16px;">What sounds does this digit represent?</h3>
194 <div style="background: rgba(255,255,255,0.2); width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: bold; margin: 30px auto; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">${currentDigit}</div>
195
196 <div id="mm-answer-area" style="margin-top: 30px;">
197 <button id="mm-show-answer" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;">Show Answer</button>
198 </div>
199 </div>
200 `;
201
202 document.getElementById('mm-show-answer').addEventListener('click', () => {
203 showAnswer(false, 'sound');
204 });
205 } else {
206 currentDigit = Math.floor(Math.random() * 100);
207 const numStr = currentDigit.toString().padStart(2, '0');
208
209 const content = document.getElementById('mm-content');
210 content.innerHTML = `
211 <div style="text-align: center;">
212 <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 16px;">What is the Major System word for this number?</h3>
213 <div style="background: rgba(255,255,255,0.2); width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; margin: 30px auto; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">${numStr}</div>
214
215 <div id="mm-answer-area" style="margin-top: 30px;">
216 <button id="mm-show-answer" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;">Show Answer</button>
217 </div>
218 </div>
219 `;
220
221 document.getElementById('mm-show-answer').addEventListener('click', () => {
222 showAnswer(false, 'word');
223 });
224 }
225 }
226
227 function showAnswer(isTest, answerType) {
228 const answerArea = document.getElementById('mm-answer-area');
229
230 if (answerType === 'sound') {
231 const info = majorSystem[currentDigit];
232 answerArea.innerHTML = `
233 <div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 20px; text-align: left; margin-bottom: 20px;">
234 <div style="font-weight: 600; font-size: 18px; margin-bottom: 10px;">Sounds: ${info.sounds}</div>
235 <div style="font-size: 14px; opacity: 0.9; margin-bottom: 8px;">${info.explanation}</div>
236 <div style="font-size: 14px; opacity: 0.85; font-style: italic;">Examples: ${info.examples}</div>
237 </div>
238
239 ${isTest ? `
240 <div style="margin-bottom: 15px; font-size: 14px;">Did you get it right?</div>
241 <div style="display: flex; gap: 10px; justify-content: center;">
242 <button id="mm-correct" style="background: rgba(76, 175, 80, 0.8); border: none; padding: 10px 25px; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; flex: 1;">✓ Correct</button>
243 <button id="mm-incorrect" style="background: rgba(244, 67, 54, 0.8); border: none; padding: 10px 25px; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; flex: 1;">✗ Incorrect</button>
244 </div>
245 ` : `
246 <button id="mm-next" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; width: 100%;">Next Question</button>
247 `}
248 `;
249 } else {
250 const word = majorWords[currentDigit];
251 const numStr = currentDigit.toString().padStart(2, '0');
252 answerArea.innerHTML = `
253 <div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 20px; text-align: center; margin-bottom: 20px;">
254 <div style="font-weight: 600; font-size: 32px; margin-bottom: 10px;">${word}</div>
255 <div style="font-size: 14px; opacity: 0.9;">Number: ${numStr}</div>
256 </div>
257
258 ${isTest ? `
259 <div style="margin-bottom: 15px; font-size: 14px;">Did you get it right?</div>
260 <div style="display: flex; gap: 10px; justify-content: center;">
261 <button id="mm-correct" style="background: rgba(76, 175, 80, 0.8); border: none; padding: 10px 25px; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; flex: 1;">✓ Correct</button>
262 <button id="mm-incorrect" style="background: rgba(244, 67, 54, 0.8); border: none; padding: 10px 25px; border-radius: 8px; color: white; cursor: pointer; font-weight: 600; flex: 1;">✗ Incorrect</button>
263 </div>
264 ` : `
265 <button id="mm-next" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; width: 100%;">Next Question</button>
266 `}
267 `;
268 }
269
270 if (isTest) {
271 document.getElementById('mm-correct').addEventListener('click', () => {
272 score++;
273 totalQuestions++;
274 updateScore();
275 showTestQuestion();
276 });
277 document.getElementById('mm-incorrect').addEventListener('click', () => {
278 totalQuestions++;
279 updateScore();
280 showTestQuestion();
281 });
282 } else {
283 document.getElementById('mm-next').addEventListener('click', showPracticeQuestion);
284 }
285 }
286
287 function showTestMode() {
288 document.getElementById('mm-score').style.display = 'block';
289 updateScore();
290 showTestQuestion();
291 }
292
293 function showTestQuestion() {
294 const testType = Math.random() < 0.5 ? 'sound' : 'word';
295
296 if (testType === 'sound') {
297 currentDigit = Math.floor(Math.random() * 10);
298
299 const content = document.getElementById('mm-content');
300 content.innerHTML = `
301 <div style="text-align: center;">
302 <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 16px;">What sounds does this digit represent?</h3>
303 <div style="background: rgba(255,255,255,0.2); width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: bold; margin: 30px auto; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">${currentDigit}</div>
304
305 <div id="mm-answer-area" style="margin-top: 30px;">
306 <div style="margin-bottom: 15px; font-size: 14px;">Think of the answer, then click to reveal:</div>
307 <button id="mm-reveal-answer" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;">Reveal Answer</button>
308 </div>
309 </div>
310 `;
311
312 document.getElementById('mm-reveal-answer').addEventListener('click', () => {
313 showAnswer(true, 'sound');
314 });
315 } else {
316 currentDigit = Math.floor(Math.random() * 100);
317 const numStr = currentDigit.toString().padStart(2, '0');
318
319 const content = document.getElementById('mm-content');
320 content.innerHTML = `
321 <div style="text-align: center;">
322 <h3 style="margin-top: 0; margin-bottom: 20px; font-size: 16px;">What is the Major System word for this number?</h3>
323 <div style="background: rgba(255,255,255,0.2); width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: bold; margin: 30px auto; box-shadow: 0 5px 20px rgba(0,0,0,0.2);">${numStr}</div>
324
325 <div id="mm-answer-area" style="margin-top: 30px;">
326 <div style="margin-bottom: 15px; font-size: 14px;">Think of the answer, then click to reveal:</div>
327 <button id="mm-reveal-answer" style="background: rgba(255,255,255,0.3); border: none; padding: 12px 30px; border-radius: 8px; color: white; cursor: pointer; font-size: 16px; font-weight: 600; transition: all 0.3s;">Reveal Answer</button>
328 </div>
329 </div>
330 `;
331
332 document.getElementById('mm-reveal-answer').addEventListener('click', () => {
333 showAnswer(true, 'word');
334 });
335 }
336 }
337
338 function updateScore() {
339 const scoreValue = document.getElementById('mm-score-value');
340 const scorePercent = document.getElementById('mm-score-percent');
341
342 scoreValue.textContent = `${score}/${totalQuestions}`;
343
344 if (totalQuestions > 0) {
345 const percent = Math.round((score / totalQuestions) * 100);
346 scorePercent.textContent = `${percent}%`;
347 } else {
348 scorePercent.textContent = '0%';
349 }
350 }
351
352 // Initialize when page loads
353 function init() {
354 if (document.body) {
355 createMainUI();
356 } else {
357 setTimeout(init, 100);
358 }
359 }
360
361 init();
362})();