/html-for-10-finger-typing-tutor v2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10-Finger Typing Tutor</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: Arial, sans-serif;
}
.container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
max-width: 1200px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 10px;
font-size: 28px;
}
.subtitle {
text-align: center;
color: #666;
margin-bottom: 20px;
font-size: 14px;
}
.display-area {
background: #f5f5f5;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.last-key {
font-size: 32px;
font-weight: bold;
color: #667eea;
margin-bottom: 10px;
}
.last-finger {
font-size: 14px;
color: #666;
}
.canvas-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
svg {
max-width: 100%;
height: auto;
}
.legend {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 20px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #555;
}
.legend-color {
width: 24px;
height: 24px;
border-radius: 4px;
border: 2px solid #333;
}
.instructions {
background: #e8f4f8;
border-left: 4px solid #667eea;
padding: 15px;
border-radius: 4px;
font-size: 13px;
color: #555;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎹 10-Finger Typing Tutor</h1>
<p class="subtitle">Press any key to see which finger should be used</p>
<div class="display-area">
<div class="last-key" id="keyDisplay">-</div>
<div class="last-finger" id="fingerDisplay">Press any key...</div>
</div>
<div class="canvas-container">
<div id="canvas"></div>
</div>
<div class="legend">
<div class="legend-item">
<div class="legend-color" style="background-color: #808080; border-color: #505050;"></div>
<span>Thumb</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #4169E1; border-color: #1e3a8a;"></div>
<span>Index</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #00B050; border-color: #007c3f;"></div>
<span>Middle</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #DC143C; border-color: #9d0d24;"></div>
<span>Ring</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background-color: #FFA500; border-color: #cc8400;"></div>
<span>Pinky</span>
</div>
</div>
<div class="instructions">
<strong>📋 How to use:</strong> Start typing on your keyboard. Each key will show you which finger should press it according to the 10-finger typing method. The finger on the hand diagram will be highlighted when you press a key.
</div>
</div>
<script>
// Create SVG canvas
var draw = SVG().addTo('#canvas').size(1000, 500);
// Define colors for each finger type
var colors = {
thumb: '#808080', // Gray
index: '#4169E1', // Blue
middle: '#00B050', // Green
ring: '#DC143C', // Red
pinky: '#FFA500' // Orange
};
// Define the keyboard mapping to fingers
var keyboardMap = {
// LEFT HAND - PINKY (Orange)
'`': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['`', '~'] },
'~': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['`', '~'] },
'1': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['1', '!'] },
'!': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['1', '!'] },
'2': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['2', '@'] },
'@': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['2', '@'] },
'Tab': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Tab'] },
'Tab': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Tab'] },
'CapsLock': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['CapsLock'] },
'Shift': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Shift'] },
'Control': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Ctrl'] },
// LEFT HAND - RING (Red)
'3': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['3', '#'] },
'#': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['3', '#'] },
'w': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['W'] },
'W': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['W'] },
's': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['S'] },
'S': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['S'] },
'x': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['X'] },
'X': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['X'] },
// LEFT HAND - MIDDLE (Green)
'4': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['4', '$'] },
'$': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['4', '$'] },
'e': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['E'] },
'E': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['E'] },
'd': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['D'] },
'D': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['D'] },
'c': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['C'] },
'C': { finger: 'L_Middle', hand: 'left', fingerType: 'middle', keys: ['C'] },
// LEFT HAND - INDEX (Blue)
'5': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['5', '%'] },
'%': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['5', '%'] },
'6': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['6', '^'] },
'^': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['6', '^'] },
'r': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['R'] },
'R': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['R'] },
't': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['T'] },
'T': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['T'] },
'f': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['F'] },
'F': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['F'] },
'g': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['G'] },
'G': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['G'] },
'v': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['V'] },
'V': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['V'] },
'b': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['B'] },
'B': { finger: 'L_Index', hand: 'left', fingerType: 'index', keys: ['B'] },
// BOTH THUMBS - SPACE
' ': { finger: 'Thumbs', hand: 'both', fingerType: 'thumb', keys: ['Space'] },
// RIGHT HAND - INDEX (Blue)
'7': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['7', '&'] },
'&': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['7', '&'] },
'8': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['8', '*'] },
'*': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['8', '*'] },
'y': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['Y'] },
'Y': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['Y'] },
'u': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['U'] },
'U': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['U'] },
'h': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['H'] },
'H': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['H'] },
'j': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['J'] },
'J': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['J'] },
'n': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['N'] },
'N': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['N'] },
'm': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['M'] },
'M': { finger: 'R_Index', hand: 'right', fingerType: 'index', keys: ['M'] },
// RIGHT HAND - MIDDLE (Green)
'9': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['9', '('] },
'(': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['9', '('] },
'i': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['I'] },
'I': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['I'] },
'k': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['K'] },
'K': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: ['K'] },
',': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: [',', '<'] },
'<': { finger: 'R_Middle', hand: 'right', fingerType: 'middle', keys: [',', '<'] },
// RIGHT HAND - RING (Red)
'0': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['0', ')'] },
')': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['0', ')'] },
'o': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['O'] },
'O': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['O'] },
'l': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['L'] },
'L': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['L'] },
'.': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['.', '>'] },
'>': { finger: 'R_Ring', hand: 'right', fingerType: 'ring', keys: ['.', '>'] },
// RIGHT HAND - PINKY (Orange)
'-': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['-', '_'] },
'_': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['-', '_'] },
'=': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['=', '+'] },
'+': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['=', '+'] },
'Backspace': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['Backspace'] },
'p': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['P'] },
'P': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['P'] },
'[': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['[', '{'] },
'{': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['[', '{'] },
']': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: [']', '}'] },
'}': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: [']', '}'] },
'\\': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['\\', '|'] },
'|': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['\\', '|'] },
';': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: [';', ':'] },
':': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: [';', ':'] },
"'": { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ["'", '"'] },
'"': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ["'", '"'] },
'Enter': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['Enter'] },
'/': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['/', '?'] },
'?': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['/', '?'] },
'Alt': { finger: 'R_Pinky', hand: 'right', fingerType: 'pinky', keys: ['Alt'] },
'z': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['Z'] },
'Z': { finger: 'L_Ring', hand: 'left', fingerType: 'ring', keys: ['Z'] },
'q': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Q'] },
'Q': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['Q'] },
'a': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['A'] },
'A': { finger: 'L_Pinky', hand: 'left', fingerType: 'pinky', keys: ['A'] },
};
// Store finger elements for highlighting
var fingerElements = {};
// Function to draw a finger with unique ID
function drawFinger(x, y, length, width, angle, color, fingerName, uniqueId) {
var group = draw.group();
group.id(uniqueId);
// Create a rounded rectangle for the finger
var finger = group.rect(width, length).fill(color).stroke({width: 2, color: '#333'});
finger.move(x - width/2, y);
// Rotate the finger
finger.rotate(angle, x, y);
// Add text label
var text = group.text(fingerName).font({
size: 12,
family: 'Arial',
weight: 'bold',
fill: 'white'
});
text.move(x - text.bbox().width/2, y + length/2 - 6);
text.rotate(angle, x, y);
// Store the original color
finger.data('originalColor', color);
fingerElements[uniqueId] = { element: group, color: color, finger: finger };
return group;
}
// LEFT HAND - positioned on the left side
var leftHandX = 250;
var leftHandY = 250;
// Left hand fingers (from left to right: pinky, ring, middle, index, thumb)
drawFinger(leftHandX - 90, leftHandY, 100, 30, -25, colors.pinky, 'L5', 'L_Pinky'); // Pinky
drawFinger(leftHandX - 45, leftHandY, 110, 32, -12, colors.ring, 'L4', 'L_Ring'); // Ring
drawFinger(leftHandX + 10, leftHandY, 115, 33, 0, colors.middle, 'L3', 'L_Middle'); // Middle
drawFinger(leftHandX + 65, leftHandY, 110, 32, 12, colors.index, 'L2', 'L_Index'); // Index
drawFinger(leftHandX + 100, leftHandY + 40, 70, 28, 45, colors.thumb, 'L1', 'L_Thumb');// Thumb
// Add palm for left hand
var leftPalm = draw.circle(80).fill(colors.thumb).stroke({width: 2, color: '#333'}).opacity(0.3);
leftPalm.move(leftHandX - 40, leftHandY + 80);
// RIGHT HAND - positioned on the right side
var rightHandX = 750;
var rightHandY = 250;
// Right hand fingers (from left to right: thumb, index, middle, ring, pinky)
drawFinger(rightHandX - 100, rightHandY + 40, 70, 28, -45, colors.thumb, 'R1', 'R_Thumb'); // Thumb
drawFinger(rightHandX - 65, rightHandY, 110, 32, -12, colors.index, 'R2', 'R_Index'); // Index
drawFinger(rightHandX - 10, rightHandY, 115, 33, 0, colors.middle, 'R3', 'R_Middle'); // Middle
drawFinger(rightHandX + 45, rightHandY, 110, 32, 12, colors.ring, 'R4', 'R_Ring'); // Ring
drawFinger(rightHandX + 90, rightHandY, 100, 30, 25, colors.pinky, 'R5', 'R_Pinky'); // Pinky
// Add palm for right hand
var rightPalm = draw.circle(80).fill(colors.thumb).stroke({width: 2, color: '#333'}).opacity(0.3);
rightPalm.move(rightHandX - 40, rightHandY + 80);
// Add center text label
var centerText = draw.text('10-Finger Typing Layout').font({
size: 16,
family: 'Arial',
weight: 'bold',
fill: '#666'
});
centerText.move(500 - centerText.bbox().width/2, 20);
// Function to reset all fingers to original color
function resetFingers() {
for (var id in fingerElements) {
var elem = fingerElements[id];
elem.finger.fill(elem.color);
}
}
// Function to highlight finger
function highlightFinger(fingerId) {
resetFingers();
if (fingerId === 'Thumbs') {
fingerElements['L_Thumb'].finger.fill('#FFD700');
fingerElements['R_Thumb'].finger.fill('#FFD700');
} else if (fingerElements[fingerId]) {
fingerElements[fingerId].finger.fill('#FFD700');
}
}
// Keyboard event listener
document.addEventListener('keydown', function(event) {
var key = event.key;
var keyDisplay = document.getElementById('keyDisplay');
var fingerDisplay = document.getElementById('fingerDisplay');
// Handle special keys
var displayKey = key;
if (key === ' ') displayKey = 'SPACE';
if (key === 'Enter') displayKey = 'ENTER';
if (key === 'Backspace') displayKey = 'BACKSPACE';
if (key === 'Tab') displayKey = 'TAB';
if (key === 'CapsLock') displayKey = 'CAPS';
if (key === 'Shift') displayKey = 'SHIFT';
if (key === 'Control') displayKey = 'CTRL';
if (key === 'Alt') displayKey = 'ALT';
// Look up the key in the keyboard map
if (keyboardMap[key]) {
var mapping = keyboardMap[key];
keyDisplay.textContent = displayKey;
fingerDisplay.textContent = '👆 ' + mapping.finger.replace('_', ' ');
highlightFinger(mapping.finger);
} else {
keyDisplay.textContent = displayKey;
fingerDisplay.textContent = 'Not mapped';
resetFingers();
}
});
// Reset on key release
document.addEventListener('keyup', function(event) {
resetFingers();
});
</script>
</body>
</html>