Skip to content

Commit 16618bb

Browse files
ShadowCoder1ShadowCoder1
authored
Update finger-combination-test.html
1 parent a8f203d commit 16618bb

1 file changed

Lines changed: 72 additions & 62 deletions

File tree

‎finger-combination-test.html‎

Lines changed: 72 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1679,75 +1679,85 @@ <h1>Assessment Complete!</h1>
16791679
.sort((a, b) => b.rankingScore - a.rankingScore);
16801680
}
16811681

1682-
function generateResultsHTML(rightRanking, leftRanking, overallStats) {
1683-
console.log("Generating results HTML...");
1684-
1685-
try {
1686-
const rightHTML = generateHandRankingHTML('Right Hand', rightRanking);
1687-
const leftHTML = generateHandRankingHTML('Left Hand', leftRanking);
1688-
1689-
// Generate overall stats HTML
1690-
const statsHTML = `
1691-
<div class="overall-stats">
1692-
<h2 class="overall-title">Overall Performance</h2>
1693-
<div class="stat-grid">
1694-
<div class="stat-item">
1695-
<div class="stat-value">${overallStats.totalCombinations}</div>
1696-
<div class="stat-label">Total Combinations</div>
1697-
</div>
1698-
<div class="stat-item">
1699-
<div class="stat-value">${(overallStats.averageCompletionTime/1000).toFixed(1)}s</div>
1700-
<div class="stat-label">Average Time</div>
1701-
</div>
1702-
<div class="stat-item">
1703-
<div class="stat-value">${overallStats.averageAccuracy.toFixed(1)}%</div>
1704-
<div class="stat-label">Average Accuracy</div>
1705-
</div>
1706-
<div class="stat-item">
1707-
<div class="stat-value">${overallStats.averageIndependence.toFixed(1)}%</div>
1708-
<div class="stat-label">Independence Score</div>
1709-
</div>
1710-
</div>
1711-
</div>
1712-
`;
1713-
1714-
const html = `
1715-
<div class="results-container">
1716-
<div class="results-header">
1717-
<h1 class="results-title">Finger Combination Results</h1>
1718-
<p class="results-subtitle">Ranked by speed, accuracy, and finger independence</p>
1719-
</div>
1682+
function generateResultsHTML(rightRanking, leftRanking, overallStats) {
1683+
console.log("Generating compact results HTML...");
1684+
1685+
try {
1686+
const rightHTML = generateCompactHandRankingHTML('Right Hand', rightRanking);
1687+
const leftHTML = generateCompactHandRankingHTML('Left Hand', leftRanking);
17201688

1721-
${statsHTML}
1689+
const html = `
1690+
<div style="height: 100vh; display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; padding: 1rem; font-family: 'Inter', sans-serif;">
1691+
<div style="text-align: center; margin-bottom: 1.5rem;">
1692+
<h1 style="font-size: 2.5rem; color: #1a1a1a; font-weight: 300; margin: 0 0 0.5rem 0; letter-spacing: -0.02em;">Finger Combination Results</h1>
1693+
<p style="font-size: 1.1rem; color: #666666; font-weight: 400; margin: 0;">Ranked by speed, accuracy, and finger independence</p>
1694+
</div>
1695+
1696+
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; flex: 1; min-height: 0;">
1697+
${rightHTML}
1698+
${leftHTML}
1699+
</div>
1700+
1701+
<div style="display: flex; gap: 1.5rem; justify-content: center; margin-top: 1.5rem;">
1702+
<button onclick="location.reload()" style="background-color: #000000; color: white; border: none; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; border-radius: 50px; cursor: pointer; font-family: 'Inter', sans-serif;">Test Again</button>
1703+
<button onclick="shareResults()" style="background-color: transparent; color: #000000; border: 2px solid #000000; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; border-radius: 50px; cursor: pointer; font-family: 'Inter', sans-serif;">Share Results</button>
1704+
</div>
1705+
</div>
1706+
`;
17221707

1723-
<div class="results-grid">
1724-
${rightHTML}
1725-
${leftHTML}
1726-
</div>
1708+
document.getElementById('finalResults').innerHTML = html;
1709+
console.log("Compact results HTML generated successfully");
17271710

1728-
<div class="results-actions">
1729-
<button onclick="location.reload()" class="btn-primary">Test Again</button>
1730-
<button onclick="shareResults()" class="btn-secondary">Share Results</button>
1711+
} catch (error) {
1712+
console.error("Error generating results HTML:", error);
1713+
// Fallback results display
1714+
document.getElementById('finalResults').innerHTML = `
1715+
<div style="padding: 2rem; text-align: center; font-family: 'Inter', sans-serif; height: 100vh; display: flex; flex-direction: column; justify-content: center;">
1716+
<h1>Assessment Complete!</h1>
1717+
<p>Completed ${allResults.length} combinations</p>
1718+
<button onclick="location.reload()" style="background: #000; color: white; border: none; padding: 1rem 2rem; border-radius: 50px; cursor: pointer; margin-top: 1rem;">Test Again</button>
1719+
</div>
1720+
`;
1721+
}
1722+
}
1723+
1724+
function generateCompactHandRankingHTML(handTitle, ranking) {
1725+
console.log(`Generating compact ${handTitle} ranking with ${ranking.length} items`);
1726+
1727+
const listItems = ranking.map((result, index) => {
1728+
const position = index + 1;
1729+
const bgColor = position === 1 ? '#f0fdf4' : position <= 3 ? '#eff6ff' : '#f9fafb';
1730+
const borderColor = position === 1 ? '#22c55e' : position <= 3 ? '#3b82f6' : '#e5e7eb';
1731+
const positionColor = position === 1 ? '#22c55e' : position <= 3 ? '#3b82f6' : '#6b7280';
1732+
1733+
return `
1734+
<div style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; margin-bottom: 0.25rem; border-radius: 6px; background: ${bgColor}; border: 1px solid ${borderColor};">
1735+
<div style="display: flex; align-items: center; gap: 0.75rem;">
1736+
<span style="font-size: 0.9rem; font-weight: 700; color: ${positionColor}; min-width: 1.25rem;">${position}</span>
1737+
<span style="font-size: 0.9rem; font-weight: 500; color: #1f2937;">${result.combination.name}</span>
1738+
</div>
1739+
<div style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;">
1740+
<span style="color: #1f2937; font-weight: 600;">${(result.completionTime/1000).toFixed(1)}s</span>
1741+
<span style="color: #6b7280;">${result.accuracyScore.toFixed(0)}%</span>
1742+
<span style="color: #6b7280;">${result.independenceScore.toFixed(0)}%</span>
17311743
</div>
17321744
</div>
17331745
`;
1734-
1735-
document.getElementById('finalResults').innerHTML = html;
1736-
console.log("Results HTML generated successfully");
1737-
1738-
} catch (error) {
1739-
console.error("Error generating results HTML:", error);
1740-
// Fallback results display
1741-
document.getElementById('finalResults').innerHTML = `
1742-
<div style="padding: 2rem; text-align: center; font-family: 'Inter', sans-serif;">
1743-
<h1>Assessment Complete!</h1>
1744-
<p>Completed ${allResults.length} combinations</p>
1745-
<p>Average time: ${(overallStats.averageCompletionTime/1000).toFixed(1)} seconds</p>
1746-
<p>Average accuracy: ${overallStats.averageAccuracy.toFixed(1)}%</p>
1747-
<button onclick="location.reload()" style="background: #000; color: white; border: none; padding: 1rem 2rem; border-radius: 50px; cursor: pointer; margin-top: 1rem;">Test Again</button>
1746+
}).join('');
1747+
1748+
return `
1749+
<div style="background: white; border-radius: 12px; padding: 1.25rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; flex-direction: column; min-height: 0;">
1750+
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb;">
1751+
<h3 style="font-size: 1.25rem; font-weight: 600; color: #1f2937; margin: 0;">${handTitle}</h3>
1752+
<div style="display: flex; gap: 0.5rem; font-size: 0.7rem; color: #6b7280; text-transform: uppercase;">
1753+
<span>Time</span>
1754+
<span>Acc</span>
1755+
<span>Ind</span>
1756+
</div>
17481757
</div>
1749-
`;
1750-
}
1758+
<div style="overflow-y: auto; flex: 1;">${listItems}</div>
1759+
</div>
1760+
`;
17511761
}
17521762
function generateHandRankingHTML(handTitle, ranking) {
17531763
console.log(`Generating ${handTitle} ranking with ${ranking.length} items`);

0 commit comments

Comments
 (0)