8300 lines
291 KiB
HTML
8300 lines
291 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Soroban Flashcards</title>
|
||
<style>
|
||
body {
|
||
font-family:
|
||
DejaVu Sans,
|
||
sans-serif;
|
||
margin: 0;
|
||
padding: 20px;
|
||
background-color: #f5f5f5;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Navigation Styles */
|
||
.page-nav {
|
||
position: sticky;
|
||
top: 0;
|
||
background: #fff;
|
||
border-bottom: 2px solid #e9ecef;
|
||
z-index: 1000;
|
||
margin: -20px -20px 30px -20px;
|
||
padding: 15px 20px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.nav-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.nav-btn {
|
||
padding: 10px 20px;
|
||
border: 2px solid #2c5f76;
|
||
background: white;
|
||
color: #2c5f76;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: all 0.2s ease;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-btn:hover {
|
||
background: #f8f9fa;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.nav-btn.active {
|
||
background: #2c5f76;
|
||
color: white;
|
||
}
|
||
|
||
/* Section Styles */
|
||
.page-section {
|
||
display: none;
|
||
animation: fadeIn 0.3s ease-in-out;
|
||
}
|
||
|
||
.page-section.active {
|
||
display: block;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
color: #2c5f76;
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.section-subtitle {
|
||
color: #666;
|
||
font-size: 1.1rem;
|
||
margin: 0;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.header h1 {
|
||
color: #333;
|
||
font-size: 2.5em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.cards-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.flashcard {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
transition:
|
||
transform 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
cursor: pointer;
|
||
position: relative;
|
||
min-height: 220px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.flashcard:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.abacus-container {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.abacus-container svg {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.numeral {
|
||
font-size: 48pt;
|
||
font-weight: bold;
|
||
color: #333;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(255, 255, 255, 0.95);
|
||
padding: 15px 25px;
|
||
border-radius: 8px;
|
||
border: 2px solid #ddd;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
z-index: 10;
|
||
}
|
||
|
||
.flashcard:hover .numeral {
|
||
opacity: 1;
|
||
}
|
||
|
||
.card-number {
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
font-size: 0.8em;
|
||
color: #999;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
padding: 2px 6px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.instructions {
|
||
text-align: center;
|
||
margin: 30px 0;
|
||
padding: 20px;
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.instructions h3 {
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.instructions p {
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.stats div {
|
||
background: #f8f9fa;
|
||
padding: 10px 15px;
|
||
border-radius: 6px;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.cards-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||
gap: 15px;
|
||
}
|
||
|
||
.flashcard {
|
||
min-height: 120px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.numeral {
|
||
font-size: calc(48pt * 0.8);
|
||
padding: 10px 20px;
|
||
}
|
||
}
|
||
|
||
/* Quiz Styling */
|
||
.quiz-section {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin: 30px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.quiz-section h2 {
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.quiz-controls {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.control-group {
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.control-group label {
|
||
display: block;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #555;
|
||
}
|
||
|
||
.count-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.count-btn {
|
||
background: white;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.count-btn:hover {
|
||
border-color: #4a90e2;
|
||
background: #f0f7ff;
|
||
}
|
||
|
||
.count-btn.active {
|
||
background: #4a90e2;
|
||
color: white;
|
||
border-color: #4a90e2;
|
||
}
|
||
|
||
.slider-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
.slider-container input[type="range"] {
|
||
width: 200px;
|
||
height: 6px;
|
||
border-radius: 3px;
|
||
background: #ddd;
|
||
outline: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.slider-container input[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #4a90e2;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.slider-value {
|
||
font-weight: bold;
|
||
color: #4a90e2;
|
||
min-width: 50px;
|
||
}
|
||
|
||
.quiz-start-btn {
|
||
background: #28a745;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.quiz-start-btn:hover {
|
||
background: #218838;
|
||
}
|
||
|
||
/* Quiz Game Area */
|
||
.quiz-game {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.quiz-progress {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
height: 8px;
|
||
background: #ddd;
|
||
border-radius: 4px;
|
||
margin: 0 auto 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: #4a90e2;
|
||
transition: width 0.3s ease;
|
||
width: 0%;
|
||
}
|
||
|
||
.progress-text {
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.quiz-display {
|
||
position: relative;
|
||
min-height: 300px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.quiz-flashcard {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||
width: min(85vw, 700px);
|
||
height: min(50vh, 400px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
/* Ensure quiz game section fits in viewport */
|
||
#quiz-game {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Responsive adjustments for smaller screens */
|
||
@media (max-height: 600px) {
|
||
.quiz-flashcard {
|
||
height: min(40vh, 300px);
|
||
padding: 15px;
|
||
}
|
||
}
|
||
|
||
@media (max-height: 500px) {
|
||
.quiz-flashcard {
|
||
height: min(35vh, 250px);
|
||
padding: 10px;
|
||
}
|
||
|
||
#quiz-game {
|
||
min-height: auto;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
|
||
.quiz-flashcard svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
.quiz-flashcard.pulse {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.quiz-flashcard.card-exit-warning {
|
||
border-color: #dc3545;
|
||
box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
|
||
}
|
||
|
||
.quiz-flashcard.card-fade-out {
|
||
opacity: 0.3;
|
||
transform: scale(0.95);
|
||
transition: all 0.1s ease;
|
||
}
|
||
|
||
.countdown {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: #4a90e2;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||
z-index: 10;
|
||
}
|
||
|
||
.countdown.ready {
|
||
color: #28a745;
|
||
}
|
||
|
||
.countdown.go {
|
||
color: #ffc107;
|
||
}
|
||
|
||
.countdown.new-card-flash {
|
||
color: #17a2b8;
|
||
font-size: 24px;
|
||
animation: flashIn 0.15s ease;
|
||
}
|
||
|
||
@keyframes flashIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(-50%, -50%) scale(0.8);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
}
|
||
|
||
/* Quiz Input */
|
||
.quiz-input {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.quiz-stats {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
margin-bottom: 30px;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.stats-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.stats-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.stats-item span:last-child {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #2c5f76;
|
||
}
|
||
|
||
.smart-input-container {
|
||
position: relative;
|
||
margin: 40px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.smart-input-prompt {
|
||
font-size: 16px;
|
||
color: #7a8695;
|
||
margin-bottom: 15px;
|
||
font-weight: normal;
|
||
}
|
||
|
||
.number-display {
|
||
min-height: 60px;
|
||
padding: 20px;
|
||
font-size: 32px;
|
||
font-family: "Courier New", "Monaco", monospace;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
color: #2c3e50;
|
||
letter-spacing: 3px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.current-typing {
|
||
display: inline-block;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.number-display.correct .current-typing {
|
||
color: #28a745;
|
||
animation: successPulse 0.5s ease;
|
||
}
|
||
|
||
.number-display.incorrect .current-typing {
|
||
color: #dc3545;
|
||
animation: errorShake 0.5s ease;
|
||
}
|
||
|
||
@keyframes successPulse {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
@keyframes errorShake {
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
25% {
|
||
transform: translateX(-10px);
|
||
}
|
||
75% {
|
||
transform: translateX(10px);
|
||
}
|
||
}
|
||
|
||
.input-feedback {
|
||
margin-top: 10px;
|
||
font-weight: bold;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.input-feedback.success {
|
||
color: #28a745;
|
||
}
|
||
|
||
.input-feedback.error {
|
||
color: #dc3545;
|
||
}
|
||
|
||
.found-numbers {
|
||
margin: 30px 0;
|
||
min-height: 60px;
|
||
}
|
||
|
||
.found-number {
|
||
display: inline-block;
|
||
margin: 5px;
|
||
padding: 10px 15px;
|
||
background: #28a745;
|
||
color: white;
|
||
border-radius: 8px;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.finish-btn {
|
||
background: #2c5f76;
|
||
color: white;
|
||
border: none;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.finish-btn:hover {
|
||
background: #1e4a5c;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.quiz-finish-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.give-up-btn {
|
||
background: #17a2b8;
|
||
color: white;
|
||
border: none;
|
||
padding: 15px 30px;
|
||
font-size: 18px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.give-up-btn:hover {
|
||
background: #138496;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.input-container {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.quiz-input textarea {
|
||
width: 100%;
|
||
max-width: 400px;
|
||
height: 120px;
|
||
border: 2px solid #ddd;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
font-size: 16px;
|
||
resize: vertical;
|
||
font-family: inherit;
|
||
}
|
||
|
||
.quiz-input textarea:focus {
|
||
outline: none;
|
||
border-color: #4a90e2;
|
||
}
|
||
|
||
.quiz-input button {
|
||
background: #4a90e2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 12px 24px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.quiz-input button:hover {
|
||
background: #357abd;
|
||
}
|
||
|
||
/* Quiz Results */
|
||
.quiz-results {
|
||
text-align: center;
|
||
padding: 40px 20px;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.score-display {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 40px;
|
||
margin: 30px 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.score-circle {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #4a90e2, #357abd);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.score-details {
|
||
text-align: left;
|
||
}
|
||
|
||
.score-details p {
|
||
margin: 8px 0;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.results-breakdown {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 30px 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.result-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.result-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.result-correct {
|
||
color: #28a745;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.result-incorrect {
|
||
color: #dc3545;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.quiz-actions {
|
||
margin-top: 30px;
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.quiz-actions button {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
#retry-quiz {
|
||
background: #ffc107;
|
||
color: #333;
|
||
}
|
||
|
||
#retry-quiz:hover {
|
||
background: #e0a800;
|
||
}
|
||
|
||
#back-to-cards {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
#back-to-cards:hover {
|
||
background: #545b62;
|
||
}
|
||
|
||
/* End Game Button */
|
||
.end-game-btn {
|
||
background: #dc3545;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.end-game-btn:hover {
|
||
background: #c82333;
|
||
}
|
||
|
||
/* Quiz Header for Game Mode */
|
||
.quiz-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 15px 20px;
|
||
background: rgba(74, 144, 226, 0.1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.quiz-header .quiz-progress {
|
||
flex: 1;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.quiz-section {
|
||
padding: 20px;
|
||
}
|
||
|
||
.count-buttons {
|
||
gap: 8px;
|
||
}
|
||
|
||
.count-btn {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.score-display {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.score-details {
|
||
text-align: center;
|
||
}
|
||
|
||
.countdown {
|
||
font-size: 36px;
|
||
}
|
||
|
||
.sorting-section {
|
||
padding: 20px;
|
||
}
|
||
|
||
.sorting-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
gap: 10px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.sort-card {
|
||
padding: 10px;
|
||
}
|
||
|
||
.sort-count-btn {
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
margin: 2px;
|
||
}
|
||
|
||
.sort-start-btn,
|
||
.sort-check-btn,
|
||
.sort-reveal-btn,
|
||
.sort-new-btn {
|
||
padding: 10px 16px;
|
||
font-size: 14px;
|
||
margin: 5px;
|
||
}
|
||
|
||
.sorting-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.challenges-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.challenge-category {
|
||
padding: 20px;
|
||
}
|
||
|
||
.challenge-card {
|
||
min-height: 80px;
|
||
padding: 15px;
|
||
}
|
||
|
||
.challenge-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 95%;
|
||
max-height: 95vh;
|
||
}
|
||
|
||
.modal-header {
|
||
padding: 15px 20px;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.modal-header h2 {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
/* Card Sorting Styling */
|
||
.sorting-section {
|
||
background: #e8f4f8;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin: 30px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.sorting-section h2 {
|
||
color: #2c5f76;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.sorting-controls {
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.sort-count-btn {
|
||
background: #ffffff;
|
||
color: #2c5f76;
|
||
border: 2px solid #2c5f76;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
margin: 0 5px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.sort-count-btn:hover {
|
||
background: #2c5f76;
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.sort-count-btn.active {
|
||
background: #2c5f76;
|
||
color: white;
|
||
}
|
||
|
||
.sorting-actions {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
/* Setup modal body for sticky positioning */
|
||
.modal-body {
|
||
position: relative;
|
||
}
|
||
|
||
/* Sticky header within modal body */
|
||
.sorting-header {
|
||
position: sticky;
|
||
top: 0;
|
||
background: #f8f9fa;
|
||
border-bottom: 2px solid #e1e5e9;
|
||
border-radius: 8px 8px 0 0;
|
||
z-index: 50;
|
||
padding: 12px 20px;
|
||
margin: 0 -20px 15px -20px; /* Extend to edges of modal body */
|
||
}
|
||
|
||
.sorting-header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
}
|
||
|
||
.sorting-status-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.sorting-timer {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #2c5f76;
|
||
}
|
||
|
||
.sorting-controls {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.header-btn {
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.check-btn {
|
||
background: #28a745;
|
||
color: white;
|
||
}
|
||
|
||
.check-btn:hover {
|
||
background: #218838;
|
||
}
|
||
|
||
.reveal-btn {
|
||
background: #ffc107;
|
||
color: #212529;
|
||
}
|
||
|
||
.reveal-btn:hover {
|
||
background: #e0a800;
|
||
}
|
||
|
||
.new-btn {
|
||
background: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.new-btn:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.end-btn {
|
||
background: #dc3545;
|
||
color: white;
|
||
}
|
||
|
||
.end-btn:hover {
|
||
background: #c82333;
|
||
}
|
||
|
||
.sorting-game-actions {
|
||
display: none; /* Hide old action buttons */
|
||
}
|
||
|
||
/* Score Modal Styles */
|
||
.score-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
z-index: 2000;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
.score-modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
max-width: 600px;
|
||
width: 90%;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
.score-modal-header {
|
||
padding: 20px 30px;
|
||
border-bottom: 1px solid #e1e5e9;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.score-modal-header h3 {
|
||
margin: 0;
|
||
color: #333;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.score-modal-close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 32px;
|
||
cursor: pointer;
|
||
color: #666;
|
||
padding: 0;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 20px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.score-modal-close:hover {
|
||
background: #f8f9fa;
|
||
color: #333;
|
||
}
|
||
|
||
.score-modal-body {
|
||
padding: 30px;
|
||
}
|
||
|
||
.score-modal-body .feedback-score {
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
color: #28a745;
|
||
}
|
||
|
||
.score-modal-body .feedback-message {
|
||
font-size: 20px;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
color: #333;
|
||
}
|
||
|
||
.score-modal-body .feedback-time {
|
||
font-size: 18px;
|
||
text-align: center;
|
||
margin-bottom: 25px;
|
||
color: #666;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.score-modal-body .feedback-breakdown {
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.score-modal-body .score-component {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #e9ecef;
|
||
}
|
||
|
||
.score-modal-body .score-component:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.score-modal-body .component-label {
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.score-modal-body .component-score {
|
||
font-weight: bold;
|
||
color: #007bff;
|
||
}
|
||
|
||
.score-modal-body .component-weight {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.score-modal-body .feedback-details {
|
||
background: #e9ecef;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: #495057;
|
||
}
|
||
|
||
.score-modal-footer {
|
||
padding: 20px 30px;
|
||
border-top: 1px solid #e1e5e9;
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.modal-btn {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.new-game-btn {
|
||
background: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.new-game-btn:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.close-btn {
|
||
background: #6c757d;
|
||
color: white;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
background: #545b62;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateY(-50px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.sort-start-btn,
|
||
.sort-check-btn,
|
||
.sort-reveal-btn,
|
||
.sort-new-btn {
|
||
background: #2c5f76;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 12px 24px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
margin: 0 10px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.sort-start-btn:hover,
|
||
.sort-check-btn:hover,
|
||
.sort-reveal-btn:hover,
|
||
.sort-new-btn:hover {
|
||
background: #1e4a61;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.sort-check-btn {
|
||
background: #28a745;
|
||
}
|
||
|
||
.sort-check-btn:hover {
|
||
background: #218838;
|
||
}
|
||
|
||
.sort-reveal-btn {
|
||
background: #ffc107;
|
||
color: #333;
|
||
}
|
||
|
||
.sort-reveal-btn:hover {
|
||
background: #e0a800;
|
||
}
|
||
|
||
.sort-new-btn {
|
||
background: #6f42c1;
|
||
}
|
||
|
||
.sort-new-btn:hover {
|
||
background: #5a32a3;
|
||
}
|
||
|
||
.sorting-instructions {
|
||
margin: 20px 0;
|
||
color: #2c5f76;
|
||
}
|
||
|
||
.sorting-progress {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
margin: 10px 0;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
/* Horizontal layout for sorting game */
|
||
.sorting-game-layout {
|
||
display: flex;
|
||
gap: 30px;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.available-cards-section {
|
||
flex: 1;
|
||
}
|
||
|
||
.sorting-slots-section {
|
||
flex: 2;
|
||
}
|
||
|
||
.available-cards-section h4,
|
||
.sorting-slots-section h4 {
|
||
margin: 0 0 15px 0;
|
||
color: #2c5f76;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sorting-area {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
justify-content: center;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
border-radius: 8px;
|
||
min-height: 120px;
|
||
border: 2px dashed #2c5f76;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.sorting-game-layout {
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
.available-cards-section,
|
||
.sorting-slots-section {
|
||
flex: none;
|
||
}
|
||
}
|
||
|
||
.position-slots {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border-radius: 8px;
|
||
border: 2px dashed #2c5f76;
|
||
}
|
||
|
||
.insert-button {
|
||
width: 32px;
|
||
height: 50px;
|
||
background: #2c5f76;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.insert-button:hover {
|
||
opacity: 1;
|
||
background: #1976d2;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.insert-button.active {
|
||
opacity: 1;
|
||
background: #1976d2;
|
||
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||
}
|
||
|
||
.insert-button.disabled {
|
||
opacity: 0.1;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.position-slot {
|
||
width: 90px;
|
||
height: 110px;
|
||
border: 2px solid #2c5f76;
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.position-slot.gradient-bg {
|
||
color: white;
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.position-slot:hover {
|
||
background: #f0f8ff;
|
||
border-color: #1a4a5c;
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.position-slot.active {
|
||
background: #e3f2fd;
|
||
border-color: #1976d2;
|
||
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
||
}
|
||
|
||
.position-slot .slot-label {
|
||
font-size: 12px;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
/* Color will be set dynamically based on background */
|
||
}
|
||
|
||
.position-slot.filled .slot-label {
|
||
position: absolute;
|
||
bottom: 8px;
|
||
left: 8px;
|
||
right: 8px;
|
||
color: #2c3e50;
|
||
text-shadow: none;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
background: rgba(255, 255, 255, 0.9);
|
||
border-radius: 4px;
|
||
padding: 4px 8px;
|
||
}
|
||
|
||
.position-slot.filled:hover .slot-label {
|
||
opacity: 1;
|
||
}
|
||
|
||
.position-slot.filled {
|
||
background: #e8f5e8;
|
||
border-color: #28a745;
|
||
}
|
||
|
||
.position-slot.filled .slot-card {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 5px;
|
||
right: 5px;
|
||
bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.position-slot.correct {
|
||
border-color: #28a745;
|
||
background: #f8fff9;
|
||
}
|
||
|
||
.position-slot.incorrect {
|
||
border-color: #dc3545;
|
||
background: #fff8f8;
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
.sorting-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin: 30px 0;
|
||
padding: 20px;
|
||
background: rgba(255, 255, 255, 0.7);
|
||
border-radius: 12px;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.sort-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
border: 2px solid transparent;
|
||
position: relative;
|
||
user-select: none;
|
||
width: 90px;
|
||
height: 90px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sort-card .card-svg svg {
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.sort-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||
border-color: #2c5f76;
|
||
}
|
||
|
||
.sort-card.selected {
|
||
border-color: #1976d2;
|
||
background: #e3f2fd;
|
||
transform: scale(1.1);
|
||
box-shadow: 0 6px 20px rgba(25, 118, 210, 0.3);
|
||
}
|
||
|
||
.sort-card.placed {
|
||
opacity: 0.7;
|
||
transform: scale(0.9);
|
||
cursor: default;
|
||
}
|
||
|
||
.sort-card.placed:hover {
|
||
transform: scale(0.95);
|
||
border-color: #28a745;
|
||
}
|
||
|
||
.sort-card.correct {
|
||
border-color: #28a745;
|
||
background: #f8fff9;
|
||
}
|
||
|
||
.sort-card.incorrect {
|
||
border-color: #dc3545;
|
||
background: #fff8f8;
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
.sort-card .card-position {
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 5px;
|
||
background: rgba(44, 95, 118, 0.8);
|
||
color: white;
|
||
border-radius: 50%;
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.sort-card .revealed-number {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 5px;
|
||
background: #ffc107;
|
||
color: #333;
|
||
border-radius: 4px;
|
||
padding: 2px 8px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
display: none;
|
||
}
|
||
|
||
.sort-card.revealed .revealed-number {
|
||
display: block;
|
||
}
|
||
|
||
.sorting-feedback {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.feedback-perfect {
|
||
background: linear-gradient(135deg, #d4edda, #c3e6cb);
|
||
color: #155724;
|
||
border: 2px solid #28a745;
|
||
}
|
||
|
||
.feedback-good {
|
||
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
|
||
color: #856404;
|
||
border: 2px solid #ffc107;
|
||
}
|
||
|
||
.feedback-needs-work {
|
||
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
|
||
color: #721c24;
|
||
border: 2px solid #dc3545;
|
||
}
|
||
|
||
.feedback-score {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.feedback-message {
|
||
font-size: 18px;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.feedback-details {
|
||
margin-top: 15px;
|
||
font-size: 14px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.feedback-breakdown {
|
||
margin: 20px 0;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.score-component {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin: 8px 0;
|
||
padding: 5px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.score-component:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.component-label {
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
|
||
.component-score {
|
||
font-weight: bold;
|
||
margin: 0 10px;
|
||
min-width: 40px;
|
||
text-align: right;
|
||
}
|
||
|
||
.component-weight {
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
min-width: 80px;
|
||
text-align: right;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
25% {
|
||
transform: translateX(-5px);
|
||
}
|
||
75% {
|
||
transform: translateX(5px);
|
||
}
|
||
}
|
||
|
||
@keyframes success-pulse {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.05);
|
||
}
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.sort-card.success {
|
||
animation: success-pulse 0.6s ease-in-out;
|
||
}
|
||
|
||
/* Challenge Buttons */
|
||
.challenges-section {
|
||
margin: 40px 0;
|
||
max-width: 1200px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.section-header h2 {
|
||
margin: 0 0 10px 0;
|
||
color: #2c3e50;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.section-header p {
|
||
margin: 0;
|
||
color: #7a8695;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.challenges-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.challenge-category {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 25px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
border: 1px solid #f0f2f5;
|
||
}
|
||
|
||
.category-title {
|
||
margin: 0 0 20px 0;
|
||
color: #2c3e50;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid #f0f2f5;
|
||
}
|
||
|
||
.challenge-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.challenge-card {
|
||
background: linear-gradient(135deg, #4a90e2, #357abd);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
text-align: left;
|
||
min-height: 100px;
|
||
}
|
||
|
||
.challenge-card:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
|
||
}
|
||
|
||
.challenge-icon {
|
||
font-size: 32px;
|
||
flex-shrink: 0;
|
||
width: 50px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.challenge-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.challenge-content h4 {
|
||
margin: 0 0 8px 0;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.challenge-content p {
|
||
margin: 0 0 12px 0;
|
||
opacity: 0.9;
|
||
font-size: 14px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.challenge-stats {
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.sorting-card {
|
||
background: linear-gradient(135deg, #2c5f76, #1e4a61);
|
||
}
|
||
|
||
.sorting-card:hover {
|
||
box-shadow: 0 8px 25px rgba(44, 95, 118, 0.4);
|
||
}
|
||
|
||
.matching-card {
|
||
background: linear-gradient(135deg, #7b4397, #dc2430);
|
||
}
|
||
|
||
.matching-card:hover {
|
||
box-shadow: 0 8px 25px rgba(123, 67, 151, 0.4);
|
||
}
|
||
|
||
.start-game-btn {
|
||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||
color: white;
|
||
border: none;
|
||
padding: 15px 20px;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
min-height: 70px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.start-game-btn:hover {
|
||
background: linear-gradient(135deg, #5f4ed6, #9085f5);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
|
||
}
|
||
|
||
.start-game-btn .btn-main {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.start-game-btn .btn-sub {
|
||
font-size: 13px;
|
||
opacity: 0.9;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.mode-buttons,
|
||
.timer-buttons {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.mode-btn,
|
||
.timer-btn {
|
||
background: #f8f9fa;
|
||
border: 2px solid #e9ecef;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
min-width: 120px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.mode-btn.active,
|
||
.timer-btn.active {
|
||
background: #007bff;
|
||
border-color: #007bff;
|
||
color: white;
|
||
}
|
||
|
||
.mode-btn:hover,
|
||
.timer-btn:hover {
|
||
border-color: #007bff;
|
||
background: #e3f2fd;
|
||
}
|
||
|
||
.mode-btn.active:hover,
|
||
.timer-btn.active:hover {
|
||
background: #0056b3;
|
||
}
|
||
|
||
.mode-icon {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.mode-text {
|
||
font-weight: 500;
|
||
}
|
||
|
||
.timer-btn {
|
||
min-width: 80px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Matching Game Styles */
|
||
.matching-header {
|
||
position: sticky;
|
||
top: 0;
|
||
background: #f8f9fa;
|
||
border-bottom: 2px solid #e9ecef;
|
||
padding: 15px 20px;
|
||
z-index: 100;
|
||
margin: 0 -20px 15px -20px;
|
||
}
|
||
|
||
.matching-header-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.matching-status-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.matching-stats {
|
||
display: flex;
|
||
gap: 15px;
|
||
font-size: 14px;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.matching-timer {
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.player-stats {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.player-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
min-width: 80px;
|
||
}
|
||
|
||
.player-info.active {
|
||
color: white;
|
||
}
|
||
|
||
.player-info.player1 {
|
||
border: 2px solid #007bff;
|
||
}
|
||
|
||
.player-info.player1.active {
|
||
background: #007bff;
|
||
}
|
||
|
||
.player-info.player2 {
|
||
border: 2px solid #fd7e14;
|
||
}
|
||
|
||
.player-info.player2.active {
|
||
background: #fd7e14;
|
||
}
|
||
|
||
.player-name {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.player-score {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.current-turn {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #007bff;
|
||
text-align: center;
|
||
}
|
||
|
||
.turn-timer {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #495057;
|
||
background: #e9ecef;
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
min-width: 60px;
|
||
text-align: center;
|
||
border: 2px solid #dee2e6;
|
||
}
|
||
|
||
.turn-timer.warning {
|
||
background: #fff3cd;
|
||
color: #856404;
|
||
animation: timerPulse 1s infinite;
|
||
}
|
||
|
||
.turn-timer.critical {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
animation: timerPulse 0.5s infinite;
|
||
}
|
||
|
||
.turn-timer.waiting {
|
||
background: #d1ecf1;
|
||
color: #0c5460;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
@keyframes timerPulse {
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.two-player-results {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 30px;
|
||
margin: 20px 0;
|
||
padding: 20px;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.player-result {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.player-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.player-final-score {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #007bff;
|
||
}
|
||
|
||
.vs-divider {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #6c757d;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.game-summary {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background: #e3f2fd;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.summary-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 12px;
|
||
color: #6c757d;
|
||
text-transform: uppercase;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #495057;
|
||
}
|
||
|
||
.matching-grid {
|
||
display: grid;
|
||
gap: 8px;
|
||
padding: 10px;
|
||
justify-content: center;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.matching-grid.grid-3x4 {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
aspect-ratio: 4/3;
|
||
width: min(100%, calc(100vh - 280px) * 4/3);
|
||
height: min(calc(100vw - 40px) * 3/4, calc(100vh - 280px));
|
||
}
|
||
|
||
.matching-grid.grid-4x4 {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
aspect-ratio: 1;
|
||
width: min(100%, calc(100vh - 280px));
|
||
height: min(calc(100vw - 40px), calc(100vh - 280px));
|
||
}
|
||
|
||
.matching-grid.grid-4x6 {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
aspect-ratio: 6/4;
|
||
width: min(100%, calc(100vh - 280px) * 6/4);
|
||
height: min(calc(100vw - 40px) * 4/6, calc(100vh - 280px));
|
||
}
|
||
|
||
.matching-grid.grid-5x6 {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
aspect-ratio: 6/5;
|
||
width: min(100%, calc(100vh - 280px) * 6/5);
|
||
height: min(calc(100vw - 40px) * 5/6, calc(100vh - 280px));
|
||
}
|
||
|
||
.match-card {
|
||
aspect-ratio: 1;
|
||
background: #ffffff;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
user-select: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* Cards automatically size to fill grid cells while maintaining aspect ratio */
|
||
.match-card {
|
||
/* Let the card fill the grid cell */
|
||
width: 100%;
|
||
height: 100%;
|
||
min-width: 0;
|
||
min-height: 0;
|
||
}
|
||
|
||
.match-card:hover {
|
||
border-color: #007bff;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
|
||
}
|
||
|
||
.match-card.flipped {
|
||
background: #f8f9fa;
|
||
border-color: #007bff;
|
||
}
|
||
|
||
.match-card.matched {
|
||
background: #d4edda;
|
||
border-color: #28a745;
|
||
cursor: default;
|
||
position: relative;
|
||
opacity: 0.7;
|
||
filter: grayscale(20%);
|
||
transform: scale(0.95);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.match-card.matched:hover {
|
||
transform: scale(0.95);
|
||
box-shadow: none;
|
||
border-color: #28a745;
|
||
}
|
||
|
||
.match-card.matched-player1 {
|
||
background: #cce7ff;
|
||
border-color: #007bff;
|
||
box-shadow: none;
|
||
opacity: 0.7;
|
||
filter: grayscale(20%);
|
||
}
|
||
|
||
.match-card.matched-player1:hover {
|
||
border-color: #007bff;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.match-card.matched-player1::before {
|
||
border-color: #007bff !important;
|
||
background: linear-gradient(
|
||
45deg,
|
||
rgba(0, 123, 255, 0.1),
|
||
rgba(0, 123, 255, 0.05)
|
||
) !important;
|
||
}
|
||
|
||
.match-card.matched-player1::after {
|
||
background: #007bff !important;
|
||
box-shadow:
|
||
0 0 0 1px #007bff,
|
||
0 0 8px rgba(0, 123, 255, 0.4) !important;
|
||
}
|
||
|
||
.match-card.matched-player2 {
|
||
background: #ffe6cc;
|
||
border-color: #fd7e14;
|
||
box-shadow: none;
|
||
opacity: 0.7;
|
||
filter: grayscale(20%);
|
||
}
|
||
|
||
.match-card.matched-player2:hover {
|
||
border-color: #fd7e14;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.match-card.matched-player2::before {
|
||
border-color: #fd7e14 !important;
|
||
background: linear-gradient(
|
||
45deg,
|
||
rgba(253, 126, 20, 0.1),
|
||
rgba(253, 126, 20, 0.05)
|
||
) !important;
|
||
}
|
||
|
||
.match-card.matched-player2::after {
|
||
background: #fd7e14 !important;
|
||
box-shadow:
|
||
0 0 0 1px #fd7e14,
|
||
0 0 8px rgba(253, 126, 20, 0.4) !important;
|
||
}
|
||
|
||
.player-badge {
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
color: white;
|
||
border: 2px solid white;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
z-index: 20;
|
||
}
|
||
|
||
.player-badge.player1 {
|
||
background: #007bff;
|
||
}
|
||
|
||
.player-badge.player2 {
|
||
background: #fd7e14;
|
||
}
|
||
|
||
.match-card.matched::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 3px;
|
||
left: 3px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #28a745;
|
||
border: 2px solid white;
|
||
border-radius: 50%;
|
||
box-shadow:
|
||
0 0 0 1px #28a745,
|
||
0 0 8px rgba(40, 167, 69, 0.4);
|
||
pointer-events: none;
|
||
z-index: 10;
|
||
}
|
||
|
||
.match-card.matched::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -2px;
|
||
left: -2px;
|
||
right: -2px;
|
||
bottom: -2px;
|
||
border: 2px solid #28a745;
|
||
border-radius: 10px;
|
||
background: linear-gradient(
|
||
45deg,
|
||
rgba(40, 167, 69, 0.1),
|
||
rgba(40, 167, 69, 0.05)
|
||
);
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.match-card.matched .match-card-content {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.match-card.invalid-move {
|
||
animation: invalidMoveShake 0.6s ease-in-out;
|
||
border-color: #dc3545 !important;
|
||
}
|
||
|
||
@keyframes invalidMoveShake {
|
||
0%,
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
10%,
|
||
30%,
|
||
50%,
|
||
70%,
|
||
90% {
|
||
transform: translateX(-3px);
|
||
}
|
||
20%,
|
||
40%,
|
||
60%,
|
||
80% {
|
||
transform: translateX(3px);
|
||
}
|
||
}
|
||
|
||
.match-card.valid-choice {
|
||
border-color: #28a745 !important;
|
||
box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
|
||
animation: validChoicePulse 2s infinite;
|
||
}
|
||
|
||
.match-card.invalid-choice {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.match-card.invalid-choice:hover {
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
@keyframes validChoicePulse {
|
||
0%,
|
||
100% {
|
||
box-shadow: 0 0 8px rgba(40, 167, 69, 0.4);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 12px rgba(40, 167, 69, 0.7);
|
||
}
|
||
}
|
||
|
||
@keyframes matchedCard {
|
||
0% {
|
||
transform: scale(1) rotate(0deg);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale(1.1) rotate(2deg);
|
||
opacity: 0.9;
|
||
}
|
||
100% {
|
||
transform: scale(0.95) rotate(0deg);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
.match-card.matched {
|
||
animation: matchedCard 0.6s ease-out forwards;
|
||
}
|
||
|
||
.match-card-content {
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 8px;
|
||
}
|
||
|
||
.match-card.flipped .match-card-content,
|
||
.match-card.matched .match-card-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.match-card-number {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #495057;
|
||
}
|
||
|
||
.match-card-abacus {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.match-card-abacus svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.match-card-back {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
gap: 4px;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.match-card-back.abacus-type {
|
||
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
|
||
}
|
||
|
||
.match-card-back.number-type {
|
||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||
}
|
||
|
||
.match-card-back .card-type-icon {
|
||
font-size: 40px;
|
||
}
|
||
|
||
.match-card.flipped .match-card-back,
|
||
.match-card.matched .match-card-back {
|
||
display: none;
|
||
}
|
||
|
||
.matching-instructions {
|
||
background: #e3f2fd;
|
||
border: 1px solid #bbdefb;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin: 0 0 20px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.matching-feedback {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin: 20px 0;
|
||
text-align: center;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.matching-grid {
|
||
gap: 6px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.matching-grid.grid-3x4 {
|
||
width: min(100%, calc(100vh - 260px) * 4/3);
|
||
height: min(calc(100vw - 30px) * 3/4, calc(100vh - 260px));
|
||
}
|
||
|
||
.matching-grid.grid-4x4 {
|
||
width: min(100%, calc(100vh - 260px));
|
||
height: min(calc(100vw - 30px), calc(100vh - 260px));
|
||
}
|
||
|
||
.matching-grid.grid-4x6 {
|
||
width: min(100%, calc(100vh - 260px) * 6/4);
|
||
height: min(calc(100vw - 30px) * 4/6, calc(100vh - 260px));
|
||
}
|
||
|
||
.matching-grid.grid-5x6 {
|
||
width: min(100%, calc(100vh - 260px) * 6/5);
|
||
height: min(calc(100vw - 30px) * 5/6, calc(100vh - 260px));
|
||
}
|
||
|
||
.match-card-number {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.match-card-back .card-type-icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.matching-header {
|
||
padding: 10px 15px;
|
||
margin: 0 -20px 10px -20px;
|
||
}
|
||
|
||
.matching-instructions {
|
||
padding: 12px;
|
||
margin: 0 0 15px 0;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.start-game-btn {
|
||
min-height: 60px;
|
||
padding: 12px 16px;
|
||
}
|
||
|
||
.start-game-btn .btn-main {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.start-game-btn .btn-sub {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.matching-grid {
|
||
gap: 4px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.matching-grid.grid-3x4 {
|
||
width: min(100%, calc(100vh - 240px) * 4/3);
|
||
height: min(calc(100vw - 20px) * 3/4, calc(100vh - 240px));
|
||
}
|
||
|
||
.matching-grid.grid-4x4 {
|
||
width: min(100%, calc(100vh - 240px));
|
||
height: min(calc(100vw - 20px), calc(100vh - 240px));
|
||
}
|
||
|
||
.matching-grid.grid-4x6 {
|
||
width: min(100%, calc(100vh - 240px) * 6/4);
|
||
height: min(calc(100vw - 20px) * 4/6, calc(100vh - 240px));
|
||
}
|
||
|
||
.matching-grid.grid-5x6 {
|
||
width: min(100%, calc(100vh - 240px) * 6/5);
|
||
height: min(calc(100vw - 20px) * 5/6, calc(100vh - 240px));
|
||
}
|
||
|
||
.match-card-number {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.match-card-back .card-type-icon {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.start-game-btn {
|
||
min-height: 50px;
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.start-game-btn .btn-main {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.start-game-btn .btn-sub {
|
||
font-size: 11px;
|
||
}
|
||
|
||
.match-card.matched::after {
|
||
width: 10px;
|
||
height: 10px;
|
||
bottom: 2px;
|
||
left: 2px;
|
||
}
|
||
}
|
||
|
||
/* Modal Styling */
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
animation: fadeIn 0.3s ease-out;
|
||
}
|
||
|
||
.modal.show {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-content {
|
||
background: white;
|
||
border-radius: 12px;
|
||
width: 90%;
|
||
max-width: 900px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
animation: slideIn 0.3s ease-out;
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px 30px;
|
||
border-bottom: 1px solid #eee;
|
||
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.modal-header h2 {
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-controls {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.fullscreen-btn,
|
||
.close-btn {
|
||
background: none;
|
||
border: none;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
padding: 5px 10px;
|
||
border-radius: 6px;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.fullscreen-btn:hover,
|
||
.close-btn:hover {
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.close-btn {
|
||
color: #666;
|
||
}
|
||
|
||
.close-btn:hover {
|
||
color: #333;
|
||
}
|
||
|
||
.modal-body {
|
||
padding: 30px;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* Fullscreen modal styling */
|
||
.modal.fullscreen {
|
||
background: rgba(0, 0, 0, 0.95);
|
||
}
|
||
|
||
.modal.fullscreen .modal-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-width: none;
|
||
max-height: none;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.modal.fullscreen .modal-header {
|
||
border-radius: 0;
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: scale(0.9) translateY(-20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: scale(1) translateY(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Main Page Header -->
|
||
<div class="header">
|
||
<h1>Soroban Flashcards</h1>
|
||
<p>Interactive learning tools for mastering the Japanese abacus</p>
|
||
</div>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="page-nav">
|
||
<div class="nav-buttons">
|
||
<button class="nav-btn active" data-section="introduction">
|
||
📚 Introduction
|
||
</button>
|
||
<button class="nav-btn" data-section="configuration">
|
||
⚙️ Configuration
|
||
</button>
|
||
<button class="nav-btn" data-section="challenges">
|
||
🎯 Challenges
|
||
</button>
|
||
<button class="nav-btn" data-section="flashcards">
|
||
🧮 Flashcards
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Section 1: Introduction -->
|
||
<section id="introduction" class="page-section active">
|
||
<div class="section-header">
|
||
<h2 class="section-title">📚 How to Learn with Soroban</h2>
|
||
<p class="section-subtitle">
|
||
Master the Japanese abacus through interactive practice
|
||
</p>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>Understanding the Soroban:</h3>
|
||
<p>
|
||
The soroban (Japanese abacus) represents numbers using beads
|
||
arranged in columns. Each column represents a place value (ones,
|
||
tens, hundreds, etc.). In each column:
|
||
</p>
|
||
<ul style="text-align: left; display: inline-block; margin: 20px 0">
|
||
<li><strong>Top bead (heaven):</strong> Represents 5</li>
|
||
<li><strong>Bottom beads (earth):</strong> Each represents 1</li>
|
||
<li>
|
||
<strong>Active beads:</strong> Pushed toward the horizontal bar
|
||
</li>
|
||
</ul>
|
||
|
||
<h3>How to Practice:</h3>
|
||
<p>
|
||
Look at each abacus representation and try to determine the number
|
||
before hovering or clicking to reveal the answer. Start with smaller
|
||
numbers and work your way up to more complex calculations.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 2: Configuration -->
|
||
<section id="configuration" class="page-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">⚙️ Current Configuration</h2>
|
||
<p class="section-subtitle">Settings used for this flashcard set</p>
|
||
</div>
|
||
|
||
<div class="stats">
|
||
<div><strong>Cards:</strong> 10</div>
|
||
<div><strong>Range:</strong> 1 - 10</div>
|
||
<div><strong>Color Scheme:</strong> All beads are the same color</div>
|
||
<div><strong>Bead Shape:</strong> Diamond</div>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<h3>Configuration Details:</h3>
|
||
<p>
|
||
This flashcard set has been generated with specific settings to help
|
||
you practice. You can generate new sets with different ranges, color
|
||
schemes, and visual styles using the command-line tools.
|
||
</p>
|
||
|
||
<h4>Available Options:</h4>
|
||
<ul style="text-align: left; display: inline-block; margin: 20px 0">
|
||
<li>
|
||
<strong>Number Ranges:</strong> Practice with any range from
|
||
0-99999
|
||
</li>
|
||
<li>
|
||
<strong>Color Schemes:</strong> Monochrome, place-value,
|
||
heaven-earth, alternating
|
||
</li>
|
||
<li><strong>Bead Shapes:</strong> Diamond, circle, square</li>
|
||
<li>
|
||
<strong>Visual Styles:</strong> Multiple colorblind-friendly
|
||
palettes
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Challenges -->
|
||
<section id="challenges" class="page-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">🎯 Interactive Challenges</h2>
|
||
<p class="section-subtitle">
|
||
Test your soroban skills with engaging games and quizzes
|
||
</p>
|
||
</div>
|
||
|
||
<div class="challenges-section">
|
||
<div class="challenges-grid">
|
||
<div class="challenge-category">
|
||
<h3 class="category-title">🧠 Memory & Speed</h3>
|
||
<div class="challenge-cards">
|
||
<button id="open-quiz-modal" class="challenge-card quiz-card">
|
||
<div class="challenge-icon">⚡</div>
|
||
<div class="challenge-content">
|
||
<h4>Speed Memory Quiz</h4>
|
||
<p>Quick card displays test your reading skills</p>
|
||
<div class="challenge-stats">
|
||
<span class="stat">🎯 Accuracy</span>
|
||
<span class="stat">⏱️ Speed</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="challenge-category">
|
||
<h3 class="category-title">🎲 Logic & Patterns</h3>
|
||
<div class="challenge-cards">
|
||
<button
|
||
id="open-sorting-modal"
|
||
class="challenge-card sorting-card"
|
||
>
|
||
<div class="challenge-icon">🔢</div>
|
||
<div class="challenge-content">
|
||
<h4>Card Sorting Challenge</h4>
|
||
<p>Arrange cards using only abacus patterns</p>
|
||
<div class="challenge-stats">
|
||
<span class="stat">🧩 Logic</span>
|
||
<span class="stat">👀 Pattern Recognition</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
id="open-matching-modal"
|
||
class="challenge-card matching-card"
|
||
>
|
||
<div class="challenge-icon">🧩</div>
|
||
<div class="challenge-content">
|
||
<h4>Matching Pairs</h4>
|
||
<p>Match abacus patterns with their numerals</p>
|
||
<div class="challenge-stats">
|
||
<span class="stat">🔍 Memory</span>
|
||
<span class="stat">⚡ Speed</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quiz Modal -->
|
||
<div id="quiz-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Speed Memory Quiz</h2>
|
||
<div class="modal-controls">
|
||
<button
|
||
id="quiz-fullscreen-btn"
|
||
class="fullscreen-btn"
|
||
title="Toggle Fullscreen"
|
||
>
|
||
⛶
|
||
</button>
|
||
<button id="close-quiz-modal" class="close-btn">×</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>
|
||
Test your soroban reading skills! Cards will be shown briefly,
|
||
then you'll enter the numbers you remember.
|
||
</p>
|
||
|
||
<div class="quiz-controls">
|
||
<div class="control-group">
|
||
<label for="quiz-count">Cards to Quiz:</label>
|
||
<div class="count-buttons">
|
||
<button type="button" class="count-btn" data-count="5">
|
||
5
|
||
</button>
|
||
<button type="button" class="count-btn" data-count="10">
|
||
10
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="count-btn active"
|
||
data-count="15"
|
||
>
|
||
15
|
||
</button>
|
||
<button type="button" class="count-btn" data-count="25">
|
||
25
|
||
</button>
|
||
<button type="button" class="count-btn" data-count="all">
|
||
All (10)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="display-time">Display Time per Card:</label>
|
||
<div class="slider-container">
|
||
<input
|
||
type="range"
|
||
id="display-time"
|
||
min="0.5"
|
||
max="10"
|
||
step="0.5"
|
||
value="2"
|
||
/>
|
||
<span class="slider-value">2.0s</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="start-quiz" class="quiz-start-btn">
|
||
Start Quiz
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Quiz Game Area (hidden initially) -->
|
||
<div id="quiz-game" class="quiz-game" style="display: none">
|
||
<div class="quiz-header">
|
||
<div class="quiz-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill"></div>
|
||
</div>
|
||
<span class="progress-text"
|
||
>Card <span id="current-card">1</span> of
|
||
<span id="total-cards">10</span></span
|
||
>
|
||
</div>
|
||
<button id="end-quiz" class="end-game-btn">End Quiz</button>
|
||
</div>
|
||
|
||
<div class="quiz-display">
|
||
<div id="quiz-card" class="quiz-flashcard">
|
||
<!-- Card content will be inserted here -->
|
||
</div>
|
||
<div id="quiz-countdown" class="countdown">Get Ready...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quiz Input Phase (hidden initially) -->
|
||
<div id="quiz-input" class="quiz-input" style="display: none">
|
||
<h3>Enter the Numbers You Remember</h3>
|
||
<div class="quiz-stats">
|
||
<div class="stats-item">
|
||
<span class="stats-label">Cards shown:</span>
|
||
<span id="cards-shown-count">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">Guesses left:</span>
|
||
<span id="guesses-remaining">0</span>
|
||
</div>
|
||
<div class="stats-item">
|
||
<span class="stats-label">Found:</span>
|
||
<span id="numbers-found">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="smart-input-container">
|
||
<div class="smart-input-prompt">
|
||
Type the numbers you remember:
|
||
</div>
|
||
<div class="number-display" id="number-display">
|
||
<span class="current-typing" id="current-typing"></span>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
id="smart-input"
|
||
style="
|
||
position: absolute;
|
||
left: -9999px;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
"
|
||
autocomplete="off"
|
||
/>
|
||
</div>
|
||
|
||
<div class="found-numbers" id="found-numbers">
|
||
<!-- Accepted numbers will appear here -->
|
||
</div>
|
||
|
||
<div class="quiz-finish-buttons">
|
||
<button
|
||
id="finish-quiz"
|
||
class="finish-btn"
|
||
style="display: none"
|
||
>
|
||
Finish Quiz
|
||
</button>
|
||
<button
|
||
id="give-up-quiz"
|
||
class="give-up-btn"
|
||
style="display: none"
|
||
>
|
||
Can't Remember More
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quiz Results (hidden initially) -->
|
||
<div id="quiz-results" class="quiz-results" style="display: none">
|
||
<h3>Quiz Results</h3>
|
||
<div class="score-display">
|
||
<div class="score-circle">
|
||
<span id="score-percentage">0%</span>
|
||
</div>
|
||
<div class="score-details">
|
||
<p>
|
||
<strong>Score:</strong>
|
||
<span id="score-correct">0</span> /
|
||
<span id="score-total">0</span> correct
|
||
</p>
|
||
<p>
|
||
<strong>Time per card:</strong>
|
||
<span id="result-timing">2.0s</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="results-breakdown">
|
||
<h4>Detailed Results:</h4>
|
||
<div id="results-list">
|
||
<!-- Results will be inserted here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quiz-actions">
|
||
<button id="retry-quiz">Try Again</button>
|
||
<button id="back-to-cards">Back to Cards</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sorting Modal -->
|
||
<div id="sorting-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Card Sorting Challenge</h2>
|
||
<div class="modal-controls">
|
||
<button
|
||
id="sorting-fullscreen-btn"
|
||
class="fullscreen-btn"
|
||
title="Toggle Fullscreen"
|
||
>
|
||
⛶
|
||
</button>
|
||
<button id="close-sorting-modal" class="close-btn">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>
|
||
Click cards and positions to arrange them in ascending order
|
||
(smallest to largest). No numerals shown - rely on reading the
|
||
abacus!
|
||
</p>
|
||
|
||
<div class="sorting-controls">
|
||
<div class="control-group">
|
||
<label for="sort-count">Cards to Sort:</label>
|
||
<div class="count-buttons">
|
||
<button
|
||
type="button"
|
||
class="sort-count-btn active"
|
||
data-count="5"
|
||
>
|
||
5
|
||
</button>
|
||
<button type="button" class="sort-count-btn" data-count="8">
|
||
8
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="sort-count-btn"
|
||
data-count="12"
|
||
>
|
||
12
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="sort-count-btn"
|
||
data-count="15"
|
||
>
|
||
15
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sorting-actions">
|
||
<button id="start-sorting" class="sort-start-btn">
|
||
Start Sorting Challenge
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game Action Buttons (now moved to sticky header) -->
|
||
<div class="sorting-game-actions" style="display: none">
|
||
<!-- Buttons moved to sticky header -->
|
||
</div>
|
||
|
||
<!-- Sorting Game Header (Sticky) -->
|
||
<div
|
||
id="sorting-header"
|
||
class="sorting-header"
|
||
style="display: none"
|
||
>
|
||
<div class="sorting-header-content">
|
||
<div class="sorting-status-group">
|
||
<span id="sorting-status">Ready to start</span>
|
||
<div class="sorting-timer" id="sorting-timer">0:00</div>
|
||
</div>
|
||
<div class="sorting-controls">
|
||
<button id="check-sorting" class="header-btn check-btn">
|
||
Check Solution
|
||
</button>
|
||
<button id="reveal-numbers" class="header-btn reveal-btn">
|
||
Show Numbers
|
||
</button>
|
||
<button id="new-sorting" class="header-btn new-btn">
|
||
New Challenge
|
||
</button>
|
||
<button id="end-sorting" class="header-btn end-btn">
|
||
End Game
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sorting Game Area -->
|
||
<div id="sorting-game" style="display: none">
|
||
<div class="sorting-instructions">
|
||
<p>
|
||
<strong>Instructions:</strong> Click a card → Click position
|
||
or + button to place. Click placed cards to move back.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sorting-game-layout">
|
||
<div class="available-cards-section">
|
||
<h4>Available Cards</h4>
|
||
<div id="sorting-area" class="sorting-area">
|
||
<!-- Available cards will be shown here -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sorting-slots-section">
|
||
<h4>Sorting Positions (Smallest → Largest)</h4>
|
||
<div id="position-slots" class="position-slots">
|
||
<!-- Position slots will be created here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="sorting-feedback"
|
||
id="sorting-feedback"
|
||
style="display: none"
|
||
>
|
||
<!-- Feedback will be shown here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Score Report Modal -->
|
||
<div id="score-modal" class="score-modal" style="display: none">
|
||
<div class="score-modal-content">
|
||
<div class="score-modal-header">
|
||
<h3>🎯 Sorting Challenge Results</h3>
|
||
<button class="score-modal-close">×</button>
|
||
</div>
|
||
<div id="score-modal-body" class="score-modal-body">
|
||
<!-- Score content will be inserted here -->
|
||
</div>
|
||
<div class="score-modal-footer">
|
||
<button
|
||
id="score-modal-new-game"
|
||
class="modal-btn new-game-btn"
|
||
>
|
||
New Challenge
|
||
</button>
|
||
<button
|
||
id="score-modal-close-btn"
|
||
class="modal-btn close-btn"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Matching Pairs Modal -->
|
||
<div id="matching-modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Matching Pairs Challenge</h2>
|
||
<div class="modal-controls">
|
||
<button
|
||
id="matching-fullscreen-btn"
|
||
class="fullscreen-btn"
|
||
title="Toggle Fullscreen"
|
||
>
|
||
⛶
|
||
</button>
|
||
<button id="close-matching-modal" class="close-btn">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>
|
||
Match abacus patterns with their corresponding numerals. Find
|
||
all pairs in minimum moves!
|
||
</p>
|
||
|
||
<div class="matching-controls">
|
||
<div class="control-group">
|
||
<label>Game Mode:</label>
|
||
<div class="mode-buttons">
|
||
<button
|
||
type="button"
|
||
class="mode-btn active"
|
||
data-mode="single"
|
||
>
|
||
<div class="mode-icon">👤</div>
|
||
<div class="mode-text">Single Player</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="mode-btn"
|
||
data-mode="two-player"
|
||
>
|
||
<div class="mode-icon">👥</div>
|
||
<div class="mode-text">Two Player</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="control-group"
|
||
id="timer-controls"
|
||
style="display: none"
|
||
>
|
||
<label>Turn Timer:</label>
|
||
<div class="timer-buttons">
|
||
<button
|
||
type="button"
|
||
class="timer-btn active"
|
||
data-timer="0"
|
||
>
|
||
No Timer
|
||
</button>
|
||
<button type="button" class="timer-btn" data-timer="15">
|
||
15 sec
|
||
</button>
|
||
<button type="button" class="timer-btn" data-timer="30">
|
||
30 sec
|
||
</button>
|
||
<button type="button" class="timer-btn" data-timer="60">
|
||
60 sec
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="match-grid-size"
|
||
>Choose Grid Size to Start:</label
|
||
>
|
||
<div class="count-buttons">
|
||
<button
|
||
type="button"
|
||
class="match-size-btn start-game-btn"
|
||
data-pairs="6"
|
||
>
|
||
<div class="btn-main">3×4 Grid</div>
|
||
<div class="btn-sub">6 pairs</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="match-size-btn start-game-btn"
|
||
data-pairs="8"
|
||
>
|
||
<div class="btn-main">4×4 Grid</div>
|
||
<div class="btn-sub">8 pairs</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="match-size-btn start-game-btn"
|
||
data-pairs="12"
|
||
>
|
||
<div class="btn-main">4×6 Grid</div>
|
||
<div class="btn-sub">12 pairs</div>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="match-size-btn start-game-btn"
|
||
data-pairs="15"
|
||
>
|
||
<div class="btn-main">5×6 Grid</div>
|
||
<div class="btn-sub">15 pairs</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Matching Game Header (Sticky) -->
|
||
<div
|
||
id="matching-header"
|
||
class="matching-header"
|
||
style="display: none"
|
||
>
|
||
<div class="matching-header-content">
|
||
<div class="matching-status-group">
|
||
<span id="matching-status">Ready to start</span>
|
||
<div class="matching-stats">
|
||
<span id="moves-counter">Moves: 0</span>
|
||
<span id="pairs-found">Pairs: 0/0</span>
|
||
<div class="matching-timer" id="matching-timer">0:00</div>
|
||
</div>
|
||
<!-- Two-player specific stats -->
|
||
<div
|
||
class="player-stats"
|
||
id="player-stats"
|
||
style="display: none"
|
||
>
|
||
<div class="player-info player1" id="player1-info">
|
||
<span class="player-name">🔵 Player 1</span>
|
||
<span class="player-score">0 pairs</span>
|
||
</div>
|
||
<div class="current-turn" id="current-turn">
|
||
🔵 Player 1's Turn
|
||
</div>
|
||
<div
|
||
class="turn-timer"
|
||
id="turn-timer"
|
||
style="display: none"
|
||
>
|
||
30s
|
||
</div>
|
||
<div class="player-info player2" id="player2-info">
|
||
<span class="player-name">🟠 Player 2</span>
|
||
<span class="player-score">0 pairs</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matching-controls">
|
||
<button id="new-matching" class="header-btn new-btn">
|
||
New Game
|
||
</button>
|
||
<button id="end-matching" class="header-btn end-btn">
|
||
End Game
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Matching Game Area -->
|
||
<div id="matching-game" style="display: none">
|
||
<div class="matching-instructions">
|
||
<p>
|
||
<strong>Instructions:</strong> Click two cards to flip them.
|
||
Purple cards (🧮) contain abacus patterns, green cards (🔢)
|
||
contain numbers. Match abacus patterns with their
|
||
corresponding numbers. Complete all pairs with minimum
|
||
moves!
|
||
</p>
|
||
</div>
|
||
|
||
<div id="matching-grid" class="matching-grid">
|
||
<!-- Matching cards will be generated here -->
|
||
</div>
|
||
|
||
<div
|
||
class="matching-feedback"
|
||
id="matching-feedback"
|
||
style="display: none"
|
||
>
|
||
<!-- Feedback will be shown here -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Matching Score Modal -->
|
||
<div
|
||
id="matching-score-modal"
|
||
class="score-modal"
|
||
style="display: none"
|
||
>
|
||
<div class="score-modal-content">
|
||
<div class="score-modal-header">
|
||
<h3>🧩 Matching Pairs Results</h3>
|
||
<button class="matching-score-modal-close">×</button>
|
||
</div>
|
||
<div id="matching-score-modal-body" class="score-modal-body">
|
||
<!-- Score content will be inserted here -->
|
||
</div>
|
||
<div class="score-modal-footer">
|
||
<button
|
||
id="matching-score-modal-new-game"
|
||
class="modal-btn new-game-btn"
|
||
>
|
||
New Challenge
|
||
</button>
|
||
<button
|
||
id="matching-score-modal-close-btn"
|
||
class="modal-btn close-btn"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 4: Flashcards -->
|
||
<section id="flashcards" class="page-section">
|
||
<div class="section-header">
|
||
<h2 class="section-title">🧮 Practice Flashcards</h2>
|
||
<p class="section-subtitle">
|
||
Interactive cards for hands-on learning
|
||
</p>
|
||
</div>
|
||
|
||
<div class="cards-grid" id="cards-grid">
|
||
<div class="flashcard" data-number="1">
|
||
<div class="card-number">#1</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 53)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">1</div>
|
||
</div>
|
||
<div class="flashcard" data-number="2">
|
||
<div class="card-number">#2</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">2</div>
|
||
</div>
|
||
<div class="flashcard" data-number="3">
|
||
<div class="card-number">#3</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 58)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">3</div>
|
||
</div>
|
||
<div class="flashcard" data-number="4">
|
||
<div class="card-number">#4</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 72.5 L 3 72.5 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 58)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 70.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">4</div>
|
||
</div>
|
||
<div class="flashcard" data-number="5">
|
||
<div class="card-number">#5</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 17)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 72.5 L 3 72.5 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 17)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 40)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 52.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 77.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">5</div>
|
||
</div>
|
||
<div class="flashcard" data-number="6">
|
||
<div class="card-number">#6</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 17)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 73 L 3 73 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 17)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 53)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">6</div>
|
||
</div>
|
||
<div class="flashcard" data-number="7">
|
||
<div class="card-number">#7</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 17)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 73 L 3 73 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 17)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">7</div>
|
||
</div>
|
||
<div class="flashcard" data-number="8">
|
||
<div class="card-number">#8</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 17)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 73 L 3 73 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 17)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 58)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">8</div>
|
||
</div>
|
||
<div class="flashcard" data-number="9">
|
||
<div class="card-number">#9</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(36.1 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 17)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 65.5 L 3 65.5 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 17)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 45.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 58)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 70.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 25 2 L 25 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">9</div>
|
||
</div>
|
||
<div class="flashcard" data-number="10">
|
||
<div class="card-number">#10</div>
|
||
<div class="abacus-container">
|
||
<svg
|
||
class="typst-doc"
|
||
viewBox="0 0 108 108"
|
||
width="108pt"
|
||
height="108pt"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||
xmlns:h5="http://www.w3.org/1999/xhtml"
|
||
>
|
||
<g>
|
||
<g transform="translate(5.400000000000001 5.400000000000001)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(23.599999999999998 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 -11.400000000000002)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(11 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 80 L 3 80 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 33)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 53)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 65.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(4.1000000000000005 78)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(36 10)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#eeeeee"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 79.5 L 3 79.5 L 3 0 Z "
|
||
/>
|
||
</g>
|
||
<g
|
||
transform="translate(29.099999999999998 10)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(29.099999999999998 40)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(29.099999999999998 52.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(29.099999999999998 65)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g
|
||
transform="translate(29.099999999999998 77.5)"
|
||
>
|
||
<g class="typst-group">
|
||
<g>
|
||
<g transform="translate(0 0)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#e6e6e6"
|
||
fill-rule="nonzero"
|
||
stroke="#000000"
|
||
stroke-width="0.5"
|
||
stroke-linecap="butt"
|
||
stroke-linejoin="miter"
|
||
stroke-miterlimit="4"
|
||
d="M 8.4 0 L 16.8 6 L 8.4 12 L 0 6 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
<g transform="translate(0 30)">
|
||
<path
|
||
class="typst-shape"
|
||
fill="#000000"
|
||
fill-rule="nonzero"
|
||
d="M 0 0 L 0 2 L 50 2 L 50 0 Z "
|
||
/>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="numeral">10</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="instructions">
|
||
<p>
|
||
<em
|
||
>Interactive flashcards for digital learning. Use the left/right
|
||
arrow keys or click the cards to flip them.</em
|
||
>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<script>
|
||
// Modal Manager - Handles modal dialogs and fullscreen functionality
|
||
class ModalManager {
|
||
constructor() {
|
||
this.isFullscreen = false;
|
||
this.bindEvents();
|
||
}
|
||
|
||
bindEvents() {
|
||
// Challenge button events
|
||
document
|
||
.getElementById("open-quiz-modal")
|
||
.addEventListener("click", () => {
|
||
this.openModal("quiz-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("open-sorting-modal")
|
||
.addEventListener("click", () => {
|
||
this.openModal("sorting-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("open-matching-modal")
|
||
.addEventListener("click", () => {
|
||
this.openModal("matching-modal");
|
||
});
|
||
|
||
// Close button events
|
||
document
|
||
.getElementById("close-quiz-modal")
|
||
.addEventListener("click", () => {
|
||
this.closeModal("quiz-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("close-sorting-modal")
|
||
.addEventListener("click", () => {
|
||
this.closeModal("sorting-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("close-matching-modal")
|
||
.addEventListener("click", () => {
|
||
this.closeModal("matching-modal");
|
||
});
|
||
|
||
// Fullscreen button events
|
||
document
|
||
.getElementById("quiz-fullscreen-btn")
|
||
.addEventListener("click", () => {
|
||
this.toggleFullscreen("quiz-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("sorting-fullscreen-btn")
|
||
.addEventListener("click", () => {
|
||
this.toggleFullscreen("sorting-modal");
|
||
});
|
||
|
||
document
|
||
.getElementById("matching-fullscreen-btn")
|
||
.addEventListener("click", () => {
|
||
this.toggleFullscreen("matching-modal");
|
||
});
|
||
|
||
// Close modal when clicking outside
|
||
document.addEventListener("click", (e) => {
|
||
if (
|
||
e.target.classList.contains("modal") &&
|
||
e.target.classList.contains("show")
|
||
) {
|
||
this.closeModal(e.target.id);
|
||
}
|
||
});
|
||
|
||
// ESC key to close modal
|
||
document.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") {
|
||
const openModal = document.querySelector(".modal.show");
|
||
if (openModal) {
|
||
this.closeModal(openModal.id);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Fullscreen change events
|
||
document.addEventListener("fullscreenchange", () => {
|
||
this.handleFullscreenChange();
|
||
});
|
||
|
||
document.addEventListener("webkitfullscreenchange", () => {
|
||
this.handleFullscreenChange();
|
||
});
|
||
|
||
document.addEventListener("mozfullscreenchange", () => {
|
||
this.handleFullscreenChange();
|
||
});
|
||
|
||
document.addEventListener("MSFullscreenChange", () => {
|
||
this.handleFullscreenChange();
|
||
});
|
||
}
|
||
|
||
openModal(modalId) {
|
||
const modal = document.getElementById(modalId);
|
||
modal.classList.add("show");
|
||
document.body.style.overflow = "hidden";
|
||
}
|
||
|
||
closeModal(modalId) {
|
||
const modal = document.getElementById(modalId);
|
||
if (this.isFullscreen) {
|
||
this.exitFullscreen();
|
||
}
|
||
modal.classList.remove("show", "fullscreen");
|
||
document.body.style.overflow = "";
|
||
}
|
||
|
||
async toggleFullscreen(modalId) {
|
||
const modal = document.getElementById(modalId);
|
||
|
||
if (!this.isFullscreen) {
|
||
try {
|
||
if (modal.requestFullscreen) {
|
||
await modal.requestFullscreen();
|
||
} else if (modal.webkitRequestFullscreen) {
|
||
await modal.webkitRequestFullscreen();
|
||
} else if (modal.mozRequestFullScreen) {
|
||
await modal.mozRequestFullScreen();
|
||
} else if (modal.msRequestFullscreen) {
|
||
await modal.msRequestFullscreen();
|
||
}
|
||
modal.classList.add("fullscreen");
|
||
} catch (error) {
|
||
console.warn("Fullscreen not supported or failed:", error);
|
||
// Fallback to CSS fullscreen
|
||
modal.classList.add("fullscreen");
|
||
}
|
||
} else {
|
||
this.exitFullscreen();
|
||
}
|
||
}
|
||
|
||
exitFullscreen() {
|
||
if (document.exitFullscreen) {
|
||
document.exitFullscreen();
|
||
} else if (document.webkitExitFullscreen) {
|
||
document.webkitExitFullscreen();
|
||
} else if (document.mozCancelFullScreen) {
|
||
document.mozCancelFullScreen();
|
||
} else if (document.msExitFullscreen) {
|
||
document.msExitFullscreen();
|
||
}
|
||
}
|
||
|
||
handleFullscreenChange() {
|
||
const isFullscreen = !!(
|
||
document.fullscreenElement ||
|
||
document.webkitFullscreenElement ||
|
||
document.mozFullScreenElement ||
|
||
document.msFullscreenElement
|
||
);
|
||
|
||
this.isFullscreen = isFullscreen;
|
||
|
||
if (!isFullscreen) {
|
||
// Remove fullscreen class from all modals when exiting fullscreen
|
||
document.querySelectorAll(".modal").forEach((modal) => {
|
||
modal.classList.remove("fullscreen");
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
// Quiz functionality - No dependencies, pure JavaScript
|
||
class SorobanQuiz {
|
||
constructor() {
|
||
this.cards = [];
|
||
this.quizCards = [];
|
||
this.currentCardIndex = 0;
|
||
this.displayTime = 2.0;
|
||
this.selectedCount = 15;
|
||
this.foundNumbers = [];
|
||
this.correctAnswers = [];
|
||
this.guessesRemaining = 0;
|
||
this.currentInput = "";
|
||
this.incorrectGuesses = 0;
|
||
this.finishButtonsBound = false;
|
||
|
||
this.initializeCards();
|
||
this.bindEvents();
|
||
}
|
||
|
||
initializeCards() {
|
||
// Extract card data from the DOM
|
||
const cardElements = document.querySelectorAll(".flashcard");
|
||
this.cards = Array.from(cardElements).map((card) => ({
|
||
number: parseInt(card.dataset.number),
|
||
svg: card.querySelector(".abacus-container").innerHTML,
|
||
element: card,
|
||
}));
|
||
}
|
||
|
||
bindEvents() {
|
||
// Count buttons
|
||
document.querySelectorAll(".count-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
document
|
||
.querySelectorAll(".count-btn")
|
||
.forEach((b) => b.classList.remove("active"));
|
||
btn.classList.add("active");
|
||
this.selectedCount =
|
||
btn.dataset.count === "all"
|
||
? this.cards.length
|
||
: parseInt(btn.dataset.count);
|
||
});
|
||
});
|
||
|
||
// Display time slider
|
||
const slider = document.getElementById("display-time");
|
||
const valueDisplay = document.querySelector(".slider-value");
|
||
slider.addEventListener("input", (e) => {
|
||
this.displayTime = parseFloat(e.target.value);
|
||
valueDisplay.textContent = this.displayTime.toFixed(1) + "s";
|
||
});
|
||
|
||
// Start quiz button
|
||
document
|
||
.getElementById("start-quiz")
|
||
.addEventListener("click", () => {
|
||
this.startQuiz();
|
||
});
|
||
|
||
// Note: Submit answers button replaced by smart input system
|
||
|
||
// Note: Finish quiz buttons are bound later in showInputPhase() when they become visible
|
||
|
||
// End quiz button
|
||
document.getElementById("end-quiz").addEventListener("click", () => {
|
||
this.endQuiz();
|
||
});
|
||
|
||
// Retry and back buttons
|
||
document
|
||
.getElementById("retry-quiz")
|
||
.addEventListener("click", () => {
|
||
this.resetQuiz();
|
||
this.startQuiz();
|
||
});
|
||
|
||
document
|
||
.getElementById("back-to-cards")
|
||
.addEventListener("click", () => {
|
||
this.resetQuiz();
|
||
});
|
||
}
|
||
|
||
async startQuiz() {
|
||
// Select random cards
|
||
this.quizCards = this.getRandomCards(this.selectedCount);
|
||
this.correctAnswers = this.quizCards.map((card) => card.number);
|
||
this.currentCardIndex = 0;
|
||
|
||
// Hide configuration controls, show only game
|
||
document.querySelector(".quiz-controls").style.display = "none";
|
||
|
||
// Show quiz game section within modal
|
||
this.hideQuizSections();
|
||
document.getElementById("quiz-game").style.display = "block";
|
||
document.getElementById("total-cards").textContent =
|
||
this.quizCards.length;
|
||
|
||
// Start with the first card
|
||
this.showNextCard();
|
||
}
|
||
|
||
getRandomCards(count) {
|
||
const shuffled = [...this.cards].sort(() => 0.5 - Math.random());
|
||
return shuffled.slice(0, Math.min(count, this.cards.length));
|
||
}
|
||
|
||
async showNextCard() {
|
||
if (this.currentCardIndex >= this.quizCards.length) {
|
||
this.showInputPhase();
|
||
return;
|
||
}
|
||
|
||
const card = this.quizCards[this.currentCardIndex];
|
||
const progress =
|
||
(this.currentCardIndex / this.quizCards.length) * 100;
|
||
|
||
// Update progress
|
||
document.querySelector(".progress-fill").style.width = progress + "%";
|
||
document.getElementById("current-card").textContent =
|
||
this.currentCardIndex + 1;
|
||
|
||
// Only show countdown for the very first card
|
||
if (this.currentCardIndex === 0) {
|
||
await this.showCountdown();
|
||
} else {
|
||
// Subtle "new card" indicator for subsequent cards
|
||
await this.showNewCardIndicator();
|
||
}
|
||
|
||
// Show card
|
||
await this.displayCard(card);
|
||
|
||
this.currentCardIndex++;
|
||
|
||
// Minimal delay before next card (just enough for the exit animation)
|
||
setTimeout(() => {
|
||
this.showNextCard();
|
||
}, 100);
|
||
}
|
||
|
||
async showNewCardIndicator() {
|
||
return new Promise((resolve) => {
|
||
const countdownEl = document.getElementById("quiz-countdown");
|
||
const cardEl = document.getElementById("quiz-card");
|
||
|
||
// Hide card temporarily
|
||
cardEl.style.display = "none";
|
||
countdownEl.style.display = "block";
|
||
|
||
// Brief flash to indicate new card
|
||
countdownEl.textContent = "Next";
|
||
countdownEl.className = "quiz-countdown new-card-flash";
|
||
|
||
setTimeout(() => {
|
||
countdownEl.style.display = "none";
|
||
resolve();
|
||
}, 150); // Very brief indication
|
||
});
|
||
}
|
||
|
||
async showCountdown() {
|
||
const countdownEl = document.getElementById("quiz-countdown");
|
||
const cardEl = document.getElementById("quiz-card");
|
||
|
||
cardEl.style.visibility = "hidden";
|
||
countdownEl.style.display = "block";
|
||
|
||
// 3, 2, 1 countdown
|
||
const counts = ["3", "2", "1", "GO!"];
|
||
|
||
for (let i = 0; i < counts.length; i++) {
|
||
countdownEl.textContent = counts[i];
|
||
countdownEl.className = "countdown";
|
||
if (i === counts.length - 1) countdownEl.classList.add("go");
|
||
|
||
await this.delay(400);
|
||
}
|
||
|
||
countdownEl.style.display = "none";
|
||
}
|
||
|
||
async displayCard(card) {
|
||
const cardEl = document.getElementById("quiz-card");
|
||
const countdownEl = document.getElementById("quiz-countdown");
|
||
|
||
// Show card content with entry animation
|
||
cardEl.innerHTML = card.svg;
|
||
cardEl.style.display = "block";
|
||
cardEl.style.visibility = "visible";
|
||
cardEl.classList.add("pulse");
|
||
|
||
// Display for most of the time
|
||
await this.delay(this.displayTime * 1000 - 300);
|
||
|
||
// Subtle exit signal - brief red border flash
|
||
cardEl.classList.add("card-exit-warning");
|
||
await this.delay(200);
|
||
|
||
// Quick fade out
|
||
cardEl.classList.add("card-fade-out");
|
||
await this.delay(100);
|
||
|
||
// Hide card and reset classes
|
||
cardEl.classList.remove(
|
||
"pulse",
|
||
"card-exit-warning",
|
||
"card-fade-out",
|
||
);
|
||
cardEl.style.visibility = "hidden";
|
||
}
|
||
|
||
showInputPhase() {
|
||
// Complete progress bar
|
||
document.querySelector(".progress-fill").style.width = "100%";
|
||
|
||
// Initialize smart input system
|
||
this.correctAnswers = this.quizCards.map((card) => card.number);
|
||
this.foundNumbers = [];
|
||
this.guessesRemaining =
|
||
this.selectedCount + Math.floor(this.selectedCount / 2); // Allow 50% extra guesses
|
||
|
||
// Update stats display
|
||
document.getElementById("cards-shown-count").textContent =
|
||
this.quizCards.length;
|
||
document.getElementById("guesses-remaining").textContent =
|
||
this.guessesRemaining;
|
||
document.getElementById("numbers-found").textContent = "0";
|
||
|
||
// Hide quiz game, show input
|
||
this.hideQuizSections();
|
||
document.getElementById("quiz-input").style.display = "block";
|
||
|
||
// Setup smart input
|
||
const smartInput = document.getElementById("smart-input");
|
||
const display = document.getElementById("number-display");
|
||
smartInput.value = "";
|
||
document.getElementById("current-typing").textContent = "";
|
||
|
||
// Focus the hidden input and make sure it captures keyboard events
|
||
smartInput.focus();
|
||
|
||
// Remove any existing event listeners to prevent duplicates
|
||
const newSmartInput = smartInput.cloneNode(true);
|
||
smartInput.parentNode.replaceChild(newSmartInput, smartInput);
|
||
|
||
// Add input event listener for real-time validation
|
||
newSmartInput.addEventListener("input", (e) =>
|
||
this.handleSmartInput(e),
|
||
);
|
||
|
||
// Make the display area clickable to maintain focus
|
||
display.addEventListener("click", () => {
|
||
newSmartInput.focus();
|
||
});
|
||
|
||
// Keep focus on the hidden input
|
||
newSmartInput.focus();
|
||
|
||
// Bind finish buttons (they exist now that quiz-input is shown)
|
||
this.bindFinishButtons();
|
||
|
||
// Show finish button when all numbers found or guesses exhausted
|
||
this.updateFinishButtonVisibility();
|
||
}
|
||
|
||
bindFinishButtons() {
|
||
// Bind finish quiz buttons - called when input phase starts and buttons are visible
|
||
// Only bind once to prevent duplicate listeners
|
||
if (this.finishButtonsBound) return;
|
||
|
||
const finishBtn = document.getElementById("finish-quiz");
|
||
const giveUpBtn = document.getElementById("give-up-quiz");
|
||
|
||
if (finishBtn) {
|
||
finishBtn.addEventListener("click", () => {
|
||
console.log("Finish quiz button clicked");
|
||
this.finishQuiz();
|
||
});
|
||
console.log("Finish button event listener added");
|
||
} else {
|
||
console.error("finish-quiz button not found in DOM");
|
||
}
|
||
|
||
if (giveUpBtn) {
|
||
giveUpBtn.addEventListener("click", () => {
|
||
console.log("Give up button clicked");
|
||
this.finishQuiz();
|
||
});
|
||
console.log("Give up button event listener added");
|
||
} else {
|
||
console.error("give-up-quiz button not found in DOM");
|
||
}
|
||
|
||
this.finishButtonsBound = true;
|
||
}
|
||
|
||
handleSmartInput(event) {
|
||
const input = event.target;
|
||
const value = input.value.trim();
|
||
const display = document.getElementById("number-display");
|
||
const typingSpan = document.getElementById("current-typing");
|
||
|
||
// Reset visual feedback
|
||
display.classList.remove("correct", "incorrect");
|
||
|
||
// Update the visual display
|
||
typingSpan.textContent = value;
|
||
|
||
// Check if input is empty
|
||
if (!value) {
|
||
this.currentInput = "";
|
||
return;
|
||
}
|
||
|
||
// Check if it's a valid number
|
||
const number = parseInt(value);
|
||
if (isNaN(number)) {
|
||
return; // Wait for more input
|
||
}
|
||
|
||
this.currentInput = value;
|
||
|
||
// Check if this number is in our correct answers and not already found
|
||
if (
|
||
this.correctAnswers.includes(number) &&
|
||
!this.foundNumbers.includes(number)
|
||
) {
|
||
// Correct number found!
|
||
this.acceptCorrectNumber(number, input, display);
|
||
} else if (
|
||
value.length >= 2 &&
|
||
!this.correctAnswers.includes(number)
|
||
) {
|
||
// Wrong number (only trigger after at least 2 digits to avoid false positives)
|
||
this.handleIncorrectGuess(input, display);
|
||
}
|
||
}
|
||
|
||
acceptCorrectNumber(number, input, display) {
|
||
// Add to found numbers
|
||
this.foundNumbers.push(number);
|
||
|
||
// Visual success feedback
|
||
display.classList.add("correct");
|
||
|
||
// Update stats
|
||
document.getElementById("numbers-found").textContent =
|
||
this.foundNumbers.length;
|
||
|
||
// Add to found numbers display
|
||
this.addFoundNumberDisplay(number);
|
||
|
||
// Clear input immediately for fast entry
|
||
setTimeout(() => {
|
||
input.value = "";
|
||
document.getElementById("current-typing").textContent = "";
|
||
this.currentInput = "";
|
||
|
||
// Check if we're done
|
||
this.updateFinishButtonVisibility();
|
||
|
||
// If all numbers found, auto-finish
|
||
if (this.foundNumbers.length === this.correctAnswers.length) {
|
||
setTimeout(() => this.finishQuiz(), 1000);
|
||
}
|
||
}, 150); // Much shorter delay - just enough to show the success feedback
|
||
|
||
// Remove success visual feedback after animation completes
|
||
setTimeout(() => {
|
||
display.classList.remove("correct");
|
||
}, 500);
|
||
}
|
||
|
||
handleIncorrectGuess(input, display) {
|
||
// Only penalize if we have guesses remaining
|
||
if (this.guessesRemaining > 0) {
|
||
this.guessesRemaining--;
|
||
this.incorrectGuesses++; // Track incorrect guesses for scoring
|
||
document.getElementById("guesses-remaining").textContent =
|
||
this.guessesRemaining;
|
||
|
||
// Visual error feedback
|
||
display.classList.add("incorrect");
|
||
|
||
// Clear input quickly for rapid entry
|
||
setTimeout(() => {
|
||
input.value = "";
|
||
document.getElementById("current-typing").textContent = "";
|
||
this.currentInput = "";
|
||
|
||
// Check if we're out of guesses
|
||
this.updateFinishButtonVisibility();
|
||
if (this.guessesRemaining === 0) {
|
||
setTimeout(() => this.finishQuiz(), 1000);
|
||
}
|
||
}, 150); // Same fast clearing as correct numbers
|
||
|
||
// Remove error visual feedback after animation completes
|
||
setTimeout(() => {
|
||
display.classList.remove("incorrect");
|
||
}, 500);
|
||
}
|
||
}
|
||
|
||
addFoundNumberDisplay(number) {
|
||
const foundContainer = document.getElementById("found-numbers");
|
||
const numberElement = document.createElement("span");
|
||
numberElement.className = "found-number";
|
||
numberElement.textContent = number;
|
||
foundContainer.appendChild(numberElement);
|
||
}
|
||
|
||
updateFinishButtonVisibility() {
|
||
const finishBtn = document.getElementById("finish-quiz");
|
||
const giveUpBtn = document.getElementById("give-up-quiz");
|
||
|
||
const hasFoundSome = this.foundNumbers.length > 0;
|
||
const hasFoundAll =
|
||
this.foundNumbers.length === this.correctAnswers.length;
|
||
const outOfGuesses = this.guessesRemaining === 0;
|
||
const hasGuessesLeft = this.guessesRemaining > 0;
|
||
|
||
if (hasFoundAll || outOfGuesses) {
|
||
// Show finish button when all found or no guesses left
|
||
finishBtn.style.display = "block";
|
||
giveUpBtn.style.display = "none";
|
||
finishBtn.textContent = hasFoundAll
|
||
? "Finish Quiz"
|
||
: "Show Results";
|
||
} else if (hasFoundSome && hasGuessesLeft) {
|
||
// Show both buttons when user has found some but could find more
|
||
finishBtn.style.display = "block";
|
||
giveUpBtn.style.display = "block";
|
||
finishBtn.textContent = "Show Results";
|
||
} else {
|
||
// No buttons when user hasn't found any yet
|
||
finishBtn.style.display = "none";
|
||
giveUpBtn.style.display = "none";
|
||
}
|
||
}
|
||
|
||
finishQuiz() {
|
||
console.log("finishQuiz called, foundNumbers:", this.foundNumbers);
|
||
// Use found numbers as answers and show results
|
||
this.answers = [...this.foundNumbers];
|
||
console.log("About to call showResults with answers:", this.answers);
|
||
this.showResults();
|
||
}
|
||
|
||
submitAnswers() {
|
||
const input = document.getElementById("answer-input").value;
|
||
this.answers = this.parseAnswers(input);
|
||
this.showResults();
|
||
}
|
||
|
||
parseAnswers(input) {
|
||
// Parse comma or space separated numbers
|
||
return input
|
||
.split(/[,\s]+/)
|
||
.map((s) => s.trim())
|
||
.filter((s) => s.length > 0)
|
||
.map((s) => parseInt(s))
|
||
.filter((n) => !isNaN(n));
|
||
}
|
||
|
||
showResults() {
|
||
const scoreData = this.calculateScore();
|
||
const correct = scoreData.correct;
|
||
const finalScore = scoreData.finalScore;
|
||
const percentage = Math.round(finalScore);
|
||
|
||
// Update score display
|
||
document.getElementById("score-percentage").textContent =
|
||
percentage + "%";
|
||
document.getElementById("score-correct").textContent = correct.length;
|
||
document.getElementById("score-total").textContent =
|
||
this.correctAnswers.length;
|
||
document.getElementById("result-timing").textContent =
|
||
this.displayTime.toFixed(1) + "s";
|
||
|
||
// Show detailed results with penalty info
|
||
this.showDetailedResults(correct, scoreData);
|
||
|
||
// Hide input, show results
|
||
this.hideQuizSections();
|
||
document.getElementById("quiz-results").style.display = "block";
|
||
}
|
||
|
||
calculateScore() {
|
||
const correct = [];
|
||
const correctSet = new Set(this.correctAnswers);
|
||
const answerSet = new Set(this.answers);
|
||
|
||
// Find correct answers
|
||
this.answers.forEach((answer) => {
|
||
if (correctSet.has(answer)) {
|
||
correct.push(answer);
|
||
}
|
||
});
|
||
|
||
// Calculate base score as percentage of correct answers
|
||
const baseScore = (correct.length / this.correctAnswers.length) * 100;
|
||
|
||
// Calculate penalty: lose 5 points per incorrect guess, minimum 0%
|
||
const penalty = this.incorrectGuesses * 5;
|
||
const finalScore = Math.max(0, baseScore - penalty);
|
||
|
||
return {
|
||
correct: correct,
|
||
baseScore: baseScore,
|
||
penalty: penalty,
|
||
incorrectGuesses: this.incorrectGuesses,
|
||
finalScore: finalScore,
|
||
};
|
||
}
|
||
|
||
showDetailedResults(correct, scoreData) {
|
||
const resultsEl = document.getElementById("results-list");
|
||
const correctSet = new Set(correct);
|
||
const answerSet = new Set(this.answers);
|
||
|
||
let html = "";
|
||
|
||
// Show scoring breakdown if there were penalties
|
||
if (scoreData && scoreData.incorrectGuesses > 0) {
|
||
html += `<div class="result-item score-breakdown">
|
||
<div style="margin-bottom: 10px; font-weight: bold; color: #2c5f76;">Score Breakdown:</div>
|
||
<div style="font-size: 0.9em; color: #666;">
|
||
Base Score: ${Math.round(scoreData.baseScore)}% (${correct.length} of ${this.correctAnswers.length} correct)<br>
|
||
Penalty: -${scoreData.penalty}% (${scoreData.incorrectGuesses} wrong guess${scoreData.incorrectGuesses > 1 ? "es" : ""} × 5 points each)<br>
|
||
<strong style="color: #2c5f76;">Final Score: ${Math.round(scoreData.finalScore)}%</strong>
|
||
</div>
|
||
</div>`;
|
||
}
|
||
|
||
// Show all correct answers and whether user got them
|
||
this.correctAnswers.forEach((num) => {
|
||
const wasCorrect = correctSet.has(num);
|
||
const className = wasCorrect
|
||
? "result-correct"
|
||
: "result-incorrect";
|
||
const status = wasCorrect ? "✓ Correct" : "✗ Missed";
|
||
html += `<div class="result-item">
|
||
<span>Card: ${num}</span>
|
||
<span class="${className}">${status}</span>
|
||
</div>`;
|
||
});
|
||
|
||
// Show any extra incorrect answers
|
||
const extraAnswers = this.answers.filter(
|
||
(a) =>
|
||
!correctSet.has(a) && this.correctAnswers.includes(a) === false,
|
||
);
|
||
extraAnswers.forEach((num) => {
|
||
html += `<div class="result-item">
|
||
<span>Wrong guess: ${num}</span>
|
||
<span class="result-incorrect">✗ Not in quiz (-5 points)</span>
|
||
</div>`;
|
||
});
|
||
|
||
resultsEl.innerHTML = html;
|
||
}
|
||
|
||
endQuiz() {
|
||
// Stop the current quiz and return to configuration
|
||
this.resetQuiz();
|
||
}
|
||
|
||
resetQuiz() {
|
||
// Reset state
|
||
this.currentCardIndex = 0;
|
||
this.answers = [];
|
||
this.correctAnswers = [];
|
||
this.quizCards = [];
|
||
this.foundNumbers = [];
|
||
this.guessesRemaining = 0;
|
||
this.currentInput = "";
|
||
this.incorrectGuesses = 0;
|
||
this.finishButtonsBound = false;
|
||
|
||
// Clear smart input
|
||
const smartInput = document.getElementById("smart-input");
|
||
if (smartInput) {
|
||
smartInput.value = "";
|
||
smartInput.classList.remove("correct", "incorrect");
|
||
}
|
||
|
||
// Clear found numbers display
|
||
const foundContainer = document.getElementById("found-numbers");
|
||
if (foundContainer) {
|
||
foundContainer.innerHTML = "";
|
||
}
|
||
|
||
// Reset stats display
|
||
document.getElementById("cards-shown-count").textContent = "0";
|
||
document.getElementById("guesses-remaining").textContent = "0";
|
||
document.getElementById("numbers-found").textContent = "0";
|
||
|
||
// Hide finish buttons
|
||
document.getElementById("finish-quiz").style.display = "none";
|
||
document.getElementById("give-up-quiz").style.display = "none";
|
||
|
||
// Reset to initial quiz state (hide all sections, show controls)
|
||
this.hideQuizSections();
|
||
document.querySelector(".quiz-controls").style.display = "block";
|
||
}
|
||
|
||
hideQuizSections() {
|
||
document.getElementById("quiz-game").style.display = "none";
|
||
document.getElementById("quiz-input").style.display = "none";
|
||
document.getElementById("quiz-results").style.display = "none";
|
||
}
|
||
|
||
delay(ms) {
|
||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||
}
|
||
}
|
||
|
||
// Card Sorting Challenge - Drag and drop functionality
|
||
class SortingChallenge {
|
||
constructor() {
|
||
this.cards = [];
|
||
this.sortingCards = [];
|
||
this.selectedCount = 5;
|
||
this.currentOrder = [];
|
||
this.correctOrder = [];
|
||
this.isDragging = false;
|
||
this.draggedElement = null;
|
||
this.draggedIndex = -1;
|
||
this.previewOrder = [];
|
||
this.lastInsertIndex = -1;
|
||
this.touchStartElement = null;
|
||
this.touchStartIndex = -1;
|
||
this.touchStartX = 0;
|
||
this.touchStartY = 0;
|
||
|
||
this.initializeSorting();
|
||
this.bindSortingEvents();
|
||
}
|
||
|
||
initializeSorting() {
|
||
// Get available cards (same as quiz cards)
|
||
const cardElements = document.querySelectorAll(".flashcard");
|
||
this.cards = Array.from(cardElements).map((card) => ({
|
||
number: parseInt(card.dataset.number),
|
||
svg: card.querySelector(".abacus-container").outerHTML,
|
||
}));
|
||
}
|
||
|
||
bindSortingEvents() {
|
||
// Card count selection
|
||
document.querySelectorAll(".sort-count-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
document
|
||
.querySelectorAll(".sort-count-btn")
|
||
.forEach((b) => b.classList.remove("active"));
|
||
e.target.classList.add("active");
|
||
this.selectedCount = parseInt(e.target.dataset.count);
|
||
});
|
||
});
|
||
|
||
// Action buttons
|
||
document
|
||
.getElementById("start-sorting")
|
||
.addEventListener("click", () => this.startSorting());
|
||
document
|
||
.getElementById("check-sorting")
|
||
.addEventListener("click", () => this.checkSolution());
|
||
document
|
||
.getElementById("reveal-numbers")
|
||
.addEventListener("click", () => this.revealNumbers());
|
||
document
|
||
.getElementById("new-sorting")
|
||
.addEventListener("click", () => this.newChallenge());
|
||
document
|
||
.getElementById("end-sorting")
|
||
.addEventListener("click", () => this.endSorting());
|
||
|
||
// Score modal event listeners
|
||
document
|
||
.querySelector(".score-modal-close")
|
||
.addEventListener("click", () => this.hideScoreModal());
|
||
document
|
||
.getElementById("score-modal-close-btn")
|
||
.addEventListener("click", () => this.hideScoreModal());
|
||
document
|
||
.getElementById("score-modal-new-game")
|
||
.addEventListener("click", () => {
|
||
this.hideScoreModal();
|
||
this.newChallenge();
|
||
});
|
||
|
||
// Close modal when clicking outside
|
||
document
|
||
.getElementById("score-modal")
|
||
.addEventListener("click", (e) => {
|
||
if (e.target.id === "score-modal") {
|
||
this.hideScoreModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
startSorting() {
|
||
// Select random cards for sorting
|
||
const shuffledCards = [...this.cards].sort(() => Math.random() - 0.5);
|
||
this.sortingCards = shuffledCards.slice(0, this.selectedCount);
|
||
this.correctOrder = [...this.sortingCards].sort(
|
||
(a, b) => a.number - b.number,
|
||
);
|
||
|
||
// Shuffle the display order
|
||
this.currentOrder = [...this.sortingCards].sort(
|
||
() => Math.random() - 0.5,
|
||
);
|
||
|
||
// Initialize revealed state
|
||
this.numbersRevealed = false;
|
||
|
||
// Hide configuration controls, show only game
|
||
document.querySelector(".sorting-controls").style.display = "none";
|
||
|
||
// Show sorting game and sticky header
|
||
document.getElementById("sorting-game").style.display = "block";
|
||
document.getElementById("sorting-header").style.display = "block";
|
||
|
||
this.renderSortingCards();
|
||
this.updateSortingStatus(
|
||
`Arrange the ${this.selectedCount} cards in ascending order (smallest to largest)`,
|
||
);
|
||
|
||
// Start timer
|
||
this.startTimer();
|
||
|
||
// Reset reveal numbers button for new game
|
||
document.getElementById("reveal-numbers").style.display =
|
||
"inline-block";
|
||
|
||
// Update buttons - hide old controls, sticky header is now visible
|
||
document.getElementById("start-sorting").style.display = "none";
|
||
document.querySelector(".sorting-game-actions").style.display =
|
||
"none";
|
||
}
|
||
|
||
getSequenceStyle(position, totalSlots) {
|
||
// Generate neutral warm gray gradient that won't clash with abacus colors
|
||
// Position 0 (first) = darkest, last position = lightest
|
||
const intensity = position / (totalSlots - 1); // 0 to 1
|
||
const lightness = 30 + intensity * 45; // 30% to 75% lightness for better contrast
|
||
return {
|
||
background: `hsl(220, 8%, ${lightness}%)`, // Very subtle blue-gray, low saturation
|
||
color: lightness > 60 ? "#2c3e50" : "#ffffff", // High contrast text
|
||
borderColor: lightness > 60 ? "#2c5f76" : "rgba(255,255,255,0.4)",
|
||
};
|
||
}
|
||
|
||
renderSortingCards() {
|
||
this.createPositionSlots();
|
||
this.renderAvailableCards();
|
||
}
|
||
|
||
createPositionSlots() {
|
||
const slotsContainer = document.getElementById("position-slots");
|
||
if (!slotsContainer) return;
|
||
|
||
slotsContainer.innerHTML = "";
|
||
this.placedCards = new Array(this.selectedCount).fill(null);
|
||
|
||
// Add insert button before the very first position
|
||
const firstInsertBtn = document.createElement("button");
|
||
firstInsertBtn.className = "insert-button";
|
||
firstInsertBtn.innerHTML = "+";
|
||
firstInsertBtn.dataset.insertAt = 0;
|
||
firstInsertBtn.addEventListener("click", (e) =>
|
||
this.handleInsertClick(0),
|
||
);
|
||
slotsContainer.appendChild(firstInsertBtn);
|
||
|
||
for (let i = 0; i < this.selectedCount; i++) {
|
||
// Add the position slot
|
||
const slot = document.createElement("div");
|
||
slot.className = "position-slot";
|
||
slot.dataset.position = i;
|
||
|
||
// Apply gradient to entire slot background
|
||
const style = this.getSequenceStyle(i, this.selectedCount);
|
||
slot.style.background = style.background;
|
||
slot.style.color = style.color;
|
||
slot.style.borderColor = style.borderColor;
|
||
|
||
slot.innerHTML = `
|
||
<div class="slot-label" style="color: ${style.color}">${i === 0 ? "Smallest" : i === this.selectedCount - 1 ? "Largest" : ""}</div>
|
||
`;
|
||
|
||
slot.addEventListener("click", (e) => this.handleSlotClick(i));
|
||
slotsContainer.appendChild(slot);
|
||
|
||
// Add insert button after each position
|
||
const insertBtn = document.createElement("button");
|
||
insertBtn.className = "insert-button";
|
||
insertBtn.innerHTML = "+";
|
||
insertBtn.dataset.insertAt = i + 1;
|
||
insertBtn.addEventListener("click", (e) =>
|
||
this.handleInsertClick(i + 1),
|
||
);
|
||
slotsContainer.appendChild(insertBtn);
|
||
}
|
||
}
|
||
|
||
renderAvailableCards() {
|
||
const sortingArea = document.getElementById("sorting-area");
|
||
if (!sortingArea) return;
|
||
|
||
sortingArea.innerHTML = "";
|
||
|
||
// Remove duplicates and filter out placed cards
|
||
const uniqueAvailable = this.currentOrder.filter(
|
||
(card, index, arr) => {
|
||
// Only keep first occurrence of each card number
|
||
const firstIndex = arr.findIndex((c) => c.number === card.number);
|
||
if (firstIndex !== index) {
|
||
console.warn(
|
||
`Duplicate card found: ${card.number}, removing duplicate`,
|
||
);
|
||
return false;
|
||
}
|
||
|
||
// Skip if already placed
|
||
if (
|
||
this.placedCards.some(
|
||
(placed) => placed && placed.number === card.number,
|
||
)
|
||
) {
|
||
console.warn(
|
||
`Card ${card.number} is both available and placed, removing from available`,
|
||
);
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
);
|
||
|
||
// Update currentOrder to clean version
|
||
this.currentOrder = uniqueAvailable;
|
||
|
||
this.currentOrder.forEach((card, index) => {
|
||
const cardEl = document.createElement("div");
|
||
cardEl.className = "sort-card";
|
||
cardEl.dataset.number = card.number;
|
||
|
||
// Apply revealed state if numbers were previously revealed
|
||
if (this.numbersRevealed) {
|
||
cardEl.classList.add("revealed");
|
||
}
|
||
|
||
cardEl.innerHTML = `
|
||
<div class="revealed-number">${card.number}</div>
|
||
<div class="card-svg">${card.svg}</div>
|
||
`;
|
||
|
||
cardEl.addEventListener("click", (e) =>
|
||
this.handleCardClick(card, cardEl),
|
||
);
|
||
sortingArea.appendChild(cardEl);
|
||
});
|
||
}
|
||
|
||
handleCardClick(card, cardElement) {
|
||
// Clear any previously selected cards
|
||
document.querySelectorAll(".sort-card.selected").forEach((el) => {
|
||
el.classList.remove("selected");
|
||
});
|
||
|
||
// Select this card
|
||
cardElement.classList.add("selected");
|
||
this.selectedCard = card;
|
||
this.selectedCardElement = cardElement;
|
||
|
||
// Highlight available positions and insert buttons
|
||
document.querySelectorAll(".position-slot").forEach((slot) => {
|
||
if (!slot.classList.contains("filled")) {
|
||
slot.classList.add("active");
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll(".insert-button").forEach((btn) => {
|
||
btn.classList.add("active");
|
||
});
|
||
|
||
this.updateSortingStatus(
|
||
`Selected card with value ${card.number}. Click a position or + button to place it.`,
|
||
);
|
||
}
|
||
|
||
handleInsertClick(insertPosition) {
|
||
if (!this.selectedCard) {
|
||
this.updateSortingStatus(
|
||
"Please select a card first, then click where to insert it.",
|
||
);
|
||
return;
|
||
}
|
||
|
||
// Handle insertion at the rightmost position (beyond current array bounds)
|
||
if (insertPosition >= this.selectedCount) {
|
||
// Find the rightmost empty position
|
||
let rightmostEmptyPos = -1;
|
||
for (let i = this.selectedCount - 1; i >= 0; i--) {
|
||
if (this.placedCards[i] === null) {
|
||
rightmostEmptyPos = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (rightmostEmptyPos === -1) {
|
||
this.updateSortingStatus(
|
||
"All positions are filled. Move a card first to make room.",
|
||
);
|
||
return;
|
||
}
|
||
|
||
// Place card in the rightmost empty position
|
||
this.placedCards[rightmostEmptyPos] = this.selectedCard;
|
||
} else {
|
||
// Create a new array for placed cards
|
||
const newPlacedCards = new Array(this.selectedCount).fill(null);
|
||
|
||
// Copy existing cards, shifting them as needed
|
||
for (let i = 0; i < this.placedCards.length; i++) {
|
||
if (this.placedCards[i] !== null) {
|
||
if (i < insertPosition) {
|
||
// Cards before insert position stay in same place
|
||
newPlacedCards[i] = this.placedCards[i];
|
||
} else {
|
||
// Cards at or after insert position shift right by 1
|
||
if (i + 1 < this.selectedCount) {
|
||
newPlacedCards[i + 1] = this.placedCards[i];
|
||
} else {
|
||
// Card would fall off - store temporarily, will handle below
|
||
newPlacedCards[i + 1] = this.placedCards[i];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Place the selected card at the insert position
|
||
newPlacedCards[insertPosition] = this.selectedCard;
|
||
|
||
// Now apply gap-filling logic: shift cards left to compress and eliminate gaps
|
||
const compactedCards = [];
|
||
for (let i = 0; i < newPlacedCards.length; i++) {
|
||
if (newPlacedCards[i] !== null) {
|
||
compactedCards.push(newPlacedCards[i]);
|
||
}
|
||
}
|
||
|
||
// If we have more cards than positions, put excess back in available
|
||
if (compactedCards.length > this.selectedCount) {
|
||
const excessCards = compactedCards.slice(this.selectedCount);
|
||
this.currentOrder.push(...excessCards);
|
||
compactedCards.splice(this.selectedCount);
|
||
}
|
||
|
||
// Fill the final array with compacted cards (no gaps)
|
||
const finalPlacedCards = new Array(this.selectedCount).fill(null);
|
||
for (let i = 0; i < compactedCards.length; i++) {
|
||
finalPlacedCards[i] = compactedCards[i];
|
||
}
|
||
|
||
this.placedCards = finalPlacedCards;
|
||
}
|
||
|
||
// Remove card from available cards
|
||
this.currentOrder = this.currentOrder.filter(
|
||
(c) => c.number !== this.selectedCard.number,
|
||
);
|
||
|
||
// Debug: Check total card count
|
||
this.debugCardCount("after insert");
|
||
|
||
// Clear selection and re-render
|
||
this.clearSelection();
|
||
this.updatePositionSlots();
|
||
this.renderAvailableCards();
|
||
|
||
// Update status
|
||
const placedCount = this.placedCards.filter((c) => c !== null).length;
|
||
if (placedCount === this.selectedCount) {
|
||
this.updateSortingStatus(
|
||
'All cards placed! Click "Check My Solution" to see how you did.',
|
||
);
|
||
} else {
|
||
this.updateSortingStatus(
|
||
`${placedCount}/${this.selectedCount} cards placed. Select another card to continue.`,
|
||
);
|
||
}
|
||
}
|
||
|
||
debugCardCount(context) {
|
||
const placedCount = this.placedCards.filter((c) => c !== null).length;
|
||
const availableCount = this.currentOrder.length;
|
||
const totalCount = placedCount + availableCount;
|
||
|
||
console.log(
|
||
`DEBUG ${context}: Placed=${placedCount}, Available=${availableCount}, Total=${totalCount}, Expected=${this.selectedCount}`,
|
||
);
|
||
|
||
if (totalCount !== this.selectedCount) {
|
||
console.error(
|
||
"Card count mismatch! Some cards are missing or duplicated.",
|
||
);
|
||
console.log(
|
||
"Placed cards:",
|
||
this.placedCards.map((c) => (c ? c.number : "empty")),
|
||
);
|
||
console.log(
|
||
"Available cards:",
|
||
this.currentOrder.map((c) => c.number),
|
||
);
|
||
}
|
||
}
|
||
|
||
updatePositionSlots() {
|
||
this.placedCards.forEach((card, position) => {
|
||
const slot = document.querySelector(
|
||
`[data-position="${position}"]`,
|
||
);
|
||
if (!slot) return;
|
||
|
||
if (card) {
|
||
slot.classList.add("filled");
|
||
// Reset to white background when filled
|
||
slot.style.background = "#fff";
|
||
slot.style.color = "#333";
|
||
slot.style.borderColor = "#2c5f76";
|
||
slot.innerHTML = `
|
||
<div class="slot-card">
|
||
<div class="card-svg">${card.svg}</div>
|
||
</div>
|
||
<div class="slot-label">← Click to move back</div>
|
||
`;
|
||
} else {
|
||
slot.classList.remove("filled");
|
||
// Apply gradient to empty slot
|
||
const style = this.getSequenceStyle(position, this.selectedCount);
|
||
slot.style.background = style.background;
|
||
slot.style.color = style.color;
|
||
slot.style.borderColor = style.borderColor;
|
||
slot.innerHTML = `
|
||
<div class="slot-label" style="color: ${style.color}">${position === 0 ? "Smallest" : position === this.selectedCount - 1 ? "Largest" : ""}</div>
|
||
`;
|
||
}
|
||
});
|
||
}
|
||
|
||
clearSelection() {
|
||
this.selectedCard = null;
|
||
this.selectedCardElement = null;
|
||
|
||
// Remove active states
|
||
document.querySelectorAll(".sort-card.selected").forEach((el) => {
|
||
el.classList.remove("selected");
|
||
});
|
||
document.querySelectorAll(".position-slot.active").forEach((el) => {
|
||
el.classList.remove("active");
|
||
});
|
||
document.querySelectorAll(".insert-button.active").forEach((el) => {
|
||
el.classList.remove("active");
|
||
});
|
||
}
|
||
|
||
handleSlotClick(position) {
|
||
const slot = document.querySelector(`[data-position="${position}"]`);
|
||
|
||
// If no card is selected but slot has a card, move it back to available
|
||
if (!this.selectedCard && this.placedCards[position]) {
|
||
const cardToMove = this.placedCards[position];
|
||
|
||
// Remove card from this position
|
||
this.placedCards[position] = null;
|
||
|
||
// Add card back to available cards
|
||
this.currentOrder.push(cardToMove);
|
||
|
||
// Debug: Check total card count
|
||
this.debugCardCount("after moving card back");
|
||
|
||
// Update slot appearance
|
||
this.updatePositionSlots();
|
||
this.renderAvailableCards();
|
||
|
||
// Auto-select the moved card so user can immediately place it elsewhere
|
||
this.selectedCard = cardToMove;
|
||
this.selectedCardElement = document.querySelector(
|
||
`[data-number="${cardToMove.number}"]`,
|
||
);
|
||
if (this.selectedCardElement) {
|
||
this.selectedCardElement.classList.add("selected");
|
||
|
||
// Highlight available positions
|
||
document.querySelectorAll(".position-slot").forEach((slot) => {
|
||
if (!slot.classList.contains("filled")) {
|
||
slot.classList.add("active");
|
||
}
|
||
});
|
||
document.querySelectorAll(".insert-button").forEach((btn) => {
|
||
btn.classList.add("active");
|
||
btn.classList.remove("disabled");
|
||
});
|
||
}
|
||
|
||
const placedCount = this.placedCards.filter(
|
||
(c) => c !== null,
|
||
).length;
|
||
this.updateSortingStatus(
|
||
`Moved card ${cardToMove.number} back and selected it. ${placedCount}/${this.selectedCount} cards placed.`,
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (!this.selectedCard) {
|
||
this.updateSortingStatus(
|
||
"Select a card first, or click a placed card to move it back.",
|
||
);
|
||
return;
|
||
}
|
||
|
||
// If slot is already filled, replace the card
|
||
if (this.placedCards[position]) {
|
||
// Move the previous card back to available area
|
||
this.currentOrder.push(this.placedCards[position]);
|
||
}
|
||
|
||
// Place the selected card in this position
|
||
this.placedCards[position] = this.selectedCard;
|
||
|
||
// Remove card from current order (available cards)
|
||
this.currentOrder = this.currentOrder.filter(
|
||
(c) => c.number !== this.selectedCard.number,
|
||
);
|
||
|
||
// Debug: Check total card count
|
||
this.debugCardCount("after regular placement");
|
||
|
||
// Update slot appearance
|
||
slot.classList.add("filled");
|
||
// Reset to white background when filled
|
||
slot.style.background = "#fff";
|
||
slot.style.color = "#333";
|
||
slot.style.borderColor = "#2c5f76";
|
||
slot.innerHTML = `
|
||
<div class="slot-card">
|
||
<div class="card-svg">${this.selectedCard.svg}</div>
|
||
</div>
|
||
<div class="slot-label">← Click to move back</div>
|
||
`;
|
||
|
||
// Clear selection and re-render
|
||
this.clearSelection();
|
||
this.renderAvailableCards();
|
||
|
||
// Update status
|
||
const placedCount = this.placedCards.filter((c) => c !== null).length;
|
||
if (placedCount === this.selectedCount) {
|
||
this.updateSortingStatus(
|
||
'All cards placed! Click "Check My Solution" to see how you did.',
|
||
);
|
||
} else {
|
||
this.updateSortingStatus(
|
||
`${placedCount}/${this.selectedCount} cards placed. Select another card to continue.`,
|
||
);
|
||
}
|
||
}
|
||
|
||
handleDragEnd(e) {
|
||
if (this.previewOrder.length > 0) {
|
||
// Commit the preview order to the actual order
|
||
this.currentOrder = [...this.previewOrder];
|
||
}
|
||
|
||
// Clean up
|
||
this.resetDragState();
|
||
|
||
// Re-render with final positions
|
||
this.renderSortingCards();
|
||
|
||
// Add success animation
|
||
setTimeout(() => {
|
||
document.querySelectorAll(".sort-card").forEach((card) => {
|
||
card.classList.add("success");
|
||
setTimeout(() => card.classList.remove("success"), 600);
|
||
});
|
||
}, 100);
|
||
}
|
||
|
||
handleDragOver(e) {
|
||
if (e.preventDefault) e.preventDefault();
|
||
e.dataTransfer.dropEffect = "move";
|
||
|
||
// Calculate where to insert based on mouse position
|
||
const insertIndex = this.calculateInsertIndex(e.clientX, e.clientY);
|
||
console.log(
|
||
"DragOver - insertIndex:",
|
||
insertIndex,
|
||
"lastInsertIndex:",
|
||
this.lastInsertIndex,
|
||
);
|
||
if (insertIndex !== -1 && insertIndex !== this.lastInsertIndex) {
|
||
console.log(
|
||
"Calling updatePreviewOrder with insertIndex:",
|
||
insertIndex,
|
||
);
|
||
this.updatePreviewOrder(insertIndex);
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
handleDragEnter(e) {
|
||
// Handle drag enter for the sorting area
|
||
}
|
||
|
||
handleDragLeave(e) {
|
||
// Handle drag leave
|
||
}
|
||
|
||
handleDrop(e) {
|
||
if (e.stopPropagation) e.stopPropagation();
|
||
// The preview order is already set, just let dragEnd handle the commit
|
||
return false;
|
||
}
|
||
|
||
calculateInsertIndex(clientX, clientY) {
|
||
const sortingArea = document.getElementById("sorting-area");
|
||
const cards = Array.from(
|
||
sortingArea.querySelectorAll(".sort-card:not(.dragging)"),
|
||
);
|
||
|
||
if (cards.length === 0) return 0;
|
||
|
||
// Simple approach: find which card the mouse is over
|
||
for (let i = 0; i < cards.length; i++) {
|
||
const card = cards[i];
|
||
const rect = card.getBoundingClientRect();
|
||
|
||
// Check if mouse is over this card
|
||
if (
|
||
clientX >= rect.left &&
|
||
clientX <= rect.right &&
|
||
clientY >= rect.top &&
|
||
clientY <= rect.bottom
|
||
) {
|
||
const cardIndex = parseInt(card.dataset.index);
|
||
const cardCenterX = rect.left + rect.width / 2;
|
||
|
||
const insertIndex =
|
||
clientX < cardCenterX ? cardIndex : cardIndex + 1;
|
||
return insertIndex;
|
||
}
|
||
}
|
||
|
||
return this.currentOrder.length;
|
||
}
|
||
|
||
updatePreviewOrder(insertIndex) {
|
||
if (this.lastInsertIndex === insertIndex) return; // No change needed
|
||
this.lastInsertIndex = insertIndex;
|
||
|
||
console.log(
|
||
"updatePreviewOrder called with insertIndex:",
|
||
insertIndex,
|
||
);
|
||
console.log(
|
||
"currentOrder:",
|
||
this.currentOrder.map((c) => c.number),
|
||
);
|
||
console.log("draggedIndex:", this.draggedIndex);
|
||
|
||
// Create new preview order
|
||
const newOrder = [...this.currentOrder];
|
||
const draggedCard = newOrder.splice(this.draggedIndex, 1)[0];
|
||
|
||
// Adjust insert index if we removed an item before it
|
||
let adjustedInsertIndex = insertIndex;
|
||
if (this.draggedIndex < insertIndex) {
|
||
adjustedInsertIndex--;
|
||
}
|
||
|
||
// Insert at new position
|
||
newOrder.splice(adjustedInsertIndex, 0, draggedCard);
|
||
this.previewOrder = newOrder;
|
||
|
||
console.log(
|
||
"New preview order:",
|
||
this.previewOrder.map((c) => c.number),
|
||
);
|
||
|
||
// Update the visual layout immediately
|
||
this.renderPreview();
|
||
}
|
||
|
||
renderPreview() {
|
||
console.log("renderPreview called");
|
||
const sortingArea = document.getElementById("sorting-area");
|
||
|
||
// Get all cards except the dragged one
|
||
const cards = Array.from(
|
||
sortingArea.querySelectorAll(".sort-card:not(.dragging)"),
|
||
);
|
||
console.log("Found cards (excluding dragged):", cards.length);
|
||
|
||
const draggedNumber = parseInt(this.draggedElement.dataset.number);
|
||
|
||
// Simply compare the full orders - if they're different, reorder
|
||
const previewNumbers = this.previewOrder.map((c) => c.number);
|
||
const currentNumbers = this.currentOrder.map((c) => c.number);
|
||
|
||
console.log("Preview order:", previewNumbers);
|
||
console.log("Current order:", currentNumbers);
|
||
|
||
// Check if the orders are different
|
||
const needsReorder = !previewNumbers.every(
|
||
(num, index) => currentNumbers[index] === num,
|
||
);
|
||
|
||
console.log("Needs reorder:", needsReorder);
|
||
|
||
if (needsReorder) {
|
||
console.log("Performing reorder...");
|
||
|
||
// Update currentOrder to match preview (this is key!)
|
||
this.currentOrder = [...this.previewOrder];
|
||
|
||
// Create a simple reordering without removing cards from DOM
|
||
// Just change their visual order using CSS flexbox order or reinsert in correct order
|
||
|
||
const previewWithoutDragged = this.previewOrder.filter(
|
||
(card) => card.number !== draggedNumber,
|
||
);
|
||
console.log(
|
||
"Cards to reorder:",
|
||
previewWithoutDragged.map((c) => c.number),
|
||
);
|
||
console.log(
|
||
"Available DOM cards:",
|
||
cards.map((c) => parseInt(c.dataset.number)),
|
||
);
|
||
|
||
// Store references to all current cards
|
||
const cardElements = new Map();
|
||
cards.forEach((card) => {
|
||
cardElements.set(parseInt(card.dataset.number), card);
|
||
});
|
||
|
||
// Reorder by moving each card to the correct position
|
||
previewWithoutDragged.forEach((card, targetIndex) => {
|
||
const cardEl = cardElements.get(card.number);
|
||
console.log(
|
||
"Finding card",
|
||
card.number,
|
||
"found element:",
|
||
!!cardEl,
|
||
);
|
||
if (cardEl) {
|
||
cardEl.dataset.index = targetIndex;
|
||
cardEl.querySelector(".card-position").textContent =
|
||
targetIndex + 1;
|
||
|
||
// Move to correct position in DOM
|
||
const currentIndex = Array.from(sortingArea.children).indexOf(
|
||
cardEl,
|
||
);
|
||
const targetPosition = targetIndex;
|
||
|
||
if (currentIndex !== targetPosition) {
|
||
if (targetPosition >= sortingArea.children.length - 1) {
|
||
sortingArea.appendChild(cardEl);
|
||
} else {
|
||
const nextSibling = sortingArea.children[targetPosition];
|
||
sortingArea.insertBefore(cardEl, nextSibling);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// Ensure dragged element stays at the end for z-index
|
||
if (
|
||
this.draggedElement &&
|
||
this.draggedElement.parentNode === sortingArea
|
||
) {
|
||
sortingArea.appendChild(this.draggedElement);
|
||
}
|
||
}
|
||
}
|
||
|
||
resetDragState() {
|
||
if (this.draggedElement) {
|
||
this.draggedElement.classList.remove("dragging");
|
||
this.draggedElement.style.transform = "";
|
||
this.draggedElement.style.position = "";
|
||
this.draggedElement.style.pointerEvents = "";
|
||
}
|
||
this.isDragging = false;
|
||
this.draggedElement = null;
|
||
this.draggedIndex = -1;
|
||
this.previewOrder = [];
|
||
this.lastInsertIndex = -1;
|
||
}
|
||
|
||
// Enhanced touch support for mobile with real-time reordering
|
||
handleTouchStart(e) {
|
||
const touch = e.touches[0];
|
||
this.touchStartX = touch.clientX;
|
||
this.touchStartY = touch.clientY;
|
||
this.touchStartElement = e.target.closest(".sort-card");
|
||
this.touchStartIndex = this.touchStartElement
|
||
? parseInt(this.touchStartElement.dataset.index)
|
||
: -1;
|
||
|
||
if (this.touchStartElement) {
|
||
this.isDragging = true;
|
||
this.draggedElement = this.touchStartElement;
|
||
this.draggedIndex = this.touchStartIndex;
|
||
this.previewOrder = [...this.currentOrder];
|
||
this.lastInsertIndex = -1;
|
||
|
||
this.touchStartElement.classList.add("dragging");
|
||
this.createPlaceholder();
|
||
}
|
||
}
|
||
|
||
handleTouchMove(e) {
|
||
e.preventDefault();
|
||
|
||
if (this.touchStartElement && this.isDragging) {
|
||
const touch = e.touches[0];
|
||
|
||
// Update dragged element position
|
||
const deltaX = touch.clientX - this.touchStartX;
|
||
const deltaY = touch.clientY - this.touchStartY;
|
||
this.touchStartElement.style.transform = `translate(${deltaX}px, ${deltaY}px) rotate(5deg) scale(1.05)`;
|
||
|
||
// Calculate insert position and update preview
|
||
const insertIndex = this.calculateInsertIndex(
|
||
touch.clientX,
|
||
touch.clientY,
|
||
);
|
||
if (insertIndex !== -1) {
|
||
this.updatePreviewOrder(insertIndex);
|
||
}
|
||
}
|
||
}
|
||
|
||
handleTouchEnd(e) {
|
||
if (!this.touchStartElement || !this.isDragging) return;
|
||
|
||
// Commit the preview order
|
||
this.currentOrder = [...this.previewOrder];
|
||
|
||
// Clean up
|
||
this.touchStartElement.classList.remove("dragging");
|
||
this.touchStartElement.style.transform = "";
|
||
this.removePlaceholder();
|
||
|
||
this.isDragging = false;
|
||
this.draggedElement = null;
|
||
this.draggedIndex = -1;
|
||
this.previewOrder = [];
|
||
this.lastInsertIndex = -1;
|
||
|
||
// Re-render final positions
|
||
this.renderSortingCards();
|
||
|
||
// Success animation
|
||
setTimeout(() => {
|
||
document.querySelectorAll(".sort-card").forEach((card) => {
|
||
card.classList.add("success");
|
||
setTimeout(() => card.classList.remove("success"), 600);
|
||
});
|
||
}, 100);
|
||
|
||
this.touchStartElement = null;
|
||
this.touchStartIndex = -1;
|
||
}
|
||
|
||
checkSolution() {
|
||
if (this.placedCards.some((card) => card === null)) {
|
||
this.updateSortingStatus(
|
||
"Please place all cards before checking your solution.",
|
||
);
|
||
return;
|
||
}
|
||
|
||
// Get the sequences for comparison
|
||
const userSequence = this.placedCards.map((card) => card.number);
|
||
const correctSequence = this.correctOrder.map((card) => card.number);
|
||
|
||
// Calculate fair score using sequence alignment
|
||
const scoreResult = this.calculateSequenceScore(
|
||
userSequence,
|
||
correctSequence,
|
||
);
|
||
|
||
// Update visual feedback for each position
|
||
this.placedCards.forEach((card, index) => {
|
||
const slot = document.querySelector(`[data-position="${index}"]`);
|
||
const isExactMatch =
|
||
card.number === this.correctOrder[index].number;
|
||
|
||
if (isExactMatch) {
|
||
slot.classList.add("correct");
|
||
slot.classList.remove("incorrect");
|
||
} else {
|
||
slot.classList.add("incorrect");
|
||
slot.classList.remove("correct");
|
||
}
|
||
});
|
||
|
||
this.showAdvancedFeedback(userSequence, correctSequence);
|
||
}
|
||
|
||
calculateSequenceScore(userSeq, correctSeq) {
|
||
// Calculate Longest Common Subsequence (LCS) score
|
||
const lcsLength = this.longestCommonSubsequence(userSeq, correctSeq);
|
||
|
||
// Calculate how many cards are in correct relative order
|
||
const relativeOrderScore = (lcsLength / correctSeq.length) * 100;
|
||
|
||
// Calculate exact position matches
|
||
let exactMatches = 0;
|
||
for (let i = 0; i < userSeq.length; i++) {
|
||
if (userSeq[i] === correctSeq[i]) {
|
||
exactMatches++;
|
||
}
|
||
}
|
||
const exactScore = (exactMatches / correctSeq.length) * 100;
|
||
|
||
// Calculate inversion count (how "scrambled" the sequence is)
|
||
const inversions = this.countInversions(userSeq, correctSeq);
|
||
const maxInversions =
|
||
(correctSeq.length * (correctSeq.length - 1)) / 2;
|
||
const inversionScore = Math.max(
|
||
0,
|
||
((maxInversions - inversions) / maxInversions) * 100,
|
||
);
|
||
|
||
// Weighted final score:
|
||
// - 50% for having cards in correct relative order (LCS)
|
||
// - 30% for exact position matches
|
||
// - 20% for overall sequence organization (inversions)
|
||
const finalScore = Math.round(
|
||
relativeOrderScore * 0.5 + exactScore * 0.3 + inversionScore * 0.2,
|
||
);
|
||
|
||
return {
|
||
percentage: finalScore,
|
||
exactMatches: exactMatches,
|
||
correctRelativeOrder: lcsLength,
|
||
totalCards: correctSeq.length,
|
||
details: {
|
||
relativeOrderScore: Math.round(relativeOrderScore),
|
||
exactScore: Math.round(exactScore),
|
||
inversionScore: Math.round(inversionScore),
|
||
inversions: inversions,
|
||
},
|
||
};
|
||
}
|
||
|
||
longestCommonSubsequence(seq1, seq2) {
|
||
const m = seq1.length;
|
||
const n = seq2.length;
|
||
const dp = Array(m + 1)
|
||
.fill()
|
||
.map(() => Array(n + 1).fill(0));
|
||
|
||
for (let i = 1; i <= m; i++) {
|
||
for (let j = 1; j <= n; j++) {
|
||
if (seq1[i - 1] === seq2[j - 1]) {
|
||
dp[i][j] = dp[i - 1][j - 1] + 1;
|
||
} else {
|
||
dp[i][j] = Math.max(dp[i - 1][j], dp[i][j - 1]);
|
||
}
|
||
}
|
||
}
|
||
|
||
return dp[m][n];
|
||
}
|
||
|
||
countInversions(userSeq, correctSeq) {
|
||
// Create a mapping from value to correct position
|
||
const correctPositions = {};
|
||
correctSeq.forEach((val, idx) => {
|
||
correctPositions[val] = idx;
|
||
});
|
||
|
||
// Convert user sequence to "correct position" sequence
|
||
const userCorrectPositions = userSeq.map(
|
||
(val) => correctPositions[val],
|
||
);
|
||
|
||
// Count inversions in this position sequence
|
||
let inversions = 0;
|
||
for (let i = 0; i < userCorrectPositions.length; i++) {
|
||
for (let j = i + 1; j < userCorrectPositions.length; j++) {
|
||
if (userCorrectPositions[i] > userCorrectPositions[j]) {
|
||
inversions++;
|
||
}
|
||
}
|
||
}
|
||
|
||
return inversions;
|
||
}
|
||
|
||
showAdvancedFeedback(userSeq, correctSeq) {
|
||
const feedbackEl = document.getElementById("sorting-feedback");
|
||
|
||
// Calculate advanced scoring metrics
|
||
const lcsLength = this.longestCommonSubsequence(userSeq, correctSeq);
|
||
const relativeOrderScore = (lcsLength / correctSeq.length) * 100;
|
||
|
||
// Calculate exact position matches
|
||
let exactMatches = 0;
|
||
for (
|
||
let i = 0;
|
||
i < Math.min(userSeq.length, correctSeq.length);
|
||
i++
|
||
) {
|
||
if (userSeq[i] === correctSeq[i]) {
|
||
exactMatches++;
|
||
}
|
||
}
|
||
const exactScore = (exactMatches / correctSeq.length) * 100;
|
||
|
||
// Calculate inversion score
|
||
const inversions = this.countInversions(userSeq, correctSeq);
|
||
const maxInversions =
|
||
(correctSeq.length * (correctSeq.length - 1)) / 2;
|
||
const inversionScore = Math.max(
|
||
0,
|
||
((maxInversions - inversions) / maxInversions) * 100,
|
||
);
|
||
|
||
// Weighted final score
|
||
const finalScore = Math.round(
|
||
relativeOrderScore * 0.5 + exactScore * 0.3 + inversionScore * 0.2,
|
||
);
|
||
|
||
const isPerfect = finalScore === 100;
|
||
|
||
let feedbackClass, message;
|
||
|
||
if (isPerfect) {
|
||
feedbackClass = "feedback-perfect";
|
||
message = "🎉 Perfect! All cards in correct order!";
|
||
} else if (finalScore >= 80) {
|
||
feedbackClass = "feedback-good";
|
||
message = "👍 Excellent! Very close to perfect!";
|
||
} else if (finalScore >= 60) {
|
||
feedbackClass = "feedback-good";
|
||
message = "👍 Good job! You understand the pattern!";
|
||
} else {
|
||
feedbackClass = "feedback-needs-work";
|
||
message =
|
||
"💪 Keep practicing! Focus on reading each abacus carefully.";
|
||
}
|
||
|
||
// Show score in modal instead of inline
|
||
this.showScoreModal({
|
||
finalScore,
|
||
message,
|
||
relativeOrderScore,
|
||
exactScore,
|
||
inversionScore,
|
||
lcsLength,
|
||
correctSeq,
|
||
exactMatches,
|
||
feedbackClass,
|
||
elapsedTime: this.getElapsedTime(),
|
||
});
|
||
|
||
// Keep inline feedback hidden
|
||
feedbackEl.style.display = "none";
|
||
|
||
this.updateSortingStatus(
|
||
isPerfect ? "Perfect solution!" : `${finalScore}% score`,
|
||
);
|
||
}
|
||
|
||
revealNumbers() {
|
||
// Track revealed state
|
||
this.numbersRevealed = true;
|
||
|
||
document.querySelectorAll(".sort-card").forEach((card) => {
|
||
card.classList.add("revealed");
|
||
});
|
||
|
||
document.getElementById("reveal-numbers").style.display = "none";
|
||
this.updateSortingStatus(
|
||
"Numbers revealed - now you can see the correct order!",
|
||
);
|
||
}
|
||
|
||
startTimer() {
|
||
this.startTime = Date.now();
|
||
this.timerInterval = setInterval(() => {
|
||
const elapsed = Math.floor((Date.now() - this.startTime) / 1000);
|
||
const minutes = Math.floor(elapsed / 60);
|
||
const seconds = elapsed % 60;
|
||
document.getElementById("sorting-timer").textContent =
|
||
`${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||
}, 1000);
|
||
}
|
||
|
||
stopTimer() {
|
||
if (this.timerInterval) {
|
||
clearInterval(this.timerInterval);
|
||
this.timerInterval = null;
|
||
}
|
||
}
|
||
|
||
getElapsedTime() {
|
||
if (this.startTime) {
|
||
return Math.floor((Date.now() - this.startTime) / 1000);
|
||
}
|
||
return 0;
|
||
}
|
||
|
||
showScoreModal(scoreData) {
|
||
const {
|
||
finalScore,
|
||
message,
|
||
relativeOrderScore,
|
||
exactScore,
|
||
inversionScore,
|
||
lcsLength,
|
||
correctSeq,
|
||
exactMatches,
|
||
feedbackClass,
|
||
elapsedTime,
|
||
} = scoreData;
|
||
|
||
const minutes = Math.floor(elapsedTime / 60);
|
||
const seconds = elapsedTime % 60;
|
||
const timeDisplay = `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||
|
||
document.getElementById("score-modal-body").innerHTML = `
|
||
<div class="feedback-score">${finalScore}%</div>
|
||
<div class="feedback-message">${message}</div>
|
||
<div class="feedback-time">⏱️ Time: ${timeDisplay}</div>
|
||
<div class="feedback-breakdown">
|
||
<div class="score-component">
|
||
<span class="component-label">Sequence Order:</span>
|
||
<span class="component-score">${Math.round(relativeOrderScore)}%</span>
|
||
<span class="component-weight">(50% weight)</span>
|
||
</div>
|
||
<div class="score-component">
|
||
<span class="component-label">Exact Positions:</span>
|
||
<span class="component-score">${Math.round(exactScore)}%</span>
|
||
<span class="component-weight">(30% weight)</span>
|
||
</div>
|
||
<div class="score-component">
|
||
<span class="component-label">Organization:</span>
|
||
<span class="component-score">${Math.round(inversionScore)}%</span>
|
||
<span class="component-weight">(20% weight)</span>
|
||
</div>
|
||
</div>
|
||
<div class="feedback-details">
|
||
Cards in correct order: ${lcsLength}/${correctSeq.length} •
|
||
Exact position matches: ${exactMatches}/${correctSeq.length}
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById("score-modal").style.display = "flex";
|
||
}
|
||
|
||
hideScoreModal() {
|
||
document.getElementById("score-modal").style.display = "none";
|
||
}
|
||
|
||
endSorting() {
|
||
// End the current sorting and return to configuration
|
||
this.resetSorting();
|
||
}
|
||
|
||
resetSorting() {
|
||
// Reset state
|
||
this.currentOrder = [];
|
||
this.correctOrder = [];
|
||
this.placedCards = [];
|
||
this.selectedCard = null;
|
||
this.selectedCardElement = null;
|
||
|
||
// Clear feedback
|
||
document.getElementById("sorting-feedback").style.display = "none";
|
||
|
||
// Hide game and sticky header, show configuration controls
|
||
document.getElementById("sorting-game").style.display = "none";
|
||
document.getElementById("sorting-header").style.display = "none";
|
||
document.querySelector(".sorting-controls").style.display = "block";
|
||
|
||
// Stop timer
|
||
this.stopTimer();
|
||
|
||
// Reset buttons
|
||
document.getElementById("start-sorting").style.display =
|
||
"inline-block";
|
||
document.querySelector(".sorting-game-actions").style.display =
|
||
"none";
|
||
}
|
||
|
||
newChallenge() {
|
||
// Reset state but stay in game mode
|
||
this.currentOrder = [];
|
||
this.correctOrder = [];
|
||
this.placedCards = [];
|
||
this.selectedCard = null;
|
||
this.selectedCardElement = null;
|
||
this.numbersRevealed = false;
|
||
|
||
// Clear feedback
|
||
document.getElementById("sorting-feedback").style.display = "none";
|
||
|
||
// Clear card states
|
||
document.querySelectorAll(".sort-card").forEach((card) => {
|
||
card.classList.remove("correct", "incorrect", "revealed");
|
||
});
|
||
|
||
// Start a new challenge (keeping game mode active)
|
||
this.startSorting();
|
||
}
|
||
|
||
updateSortingStatus(message) {
|
||
document.getElementById("sorting-status").textContent = message;
|
||
}
|
||
}
|
||
|
||
// Matching Pairs Challenge
|
||
class MatchingChallenge {
|
||
constructor() {
|
||
this.cards = [];
|
||
this.gameCards = [];
|
||
this.flippedCards = [];
|
||
this.matchedPairs = 0;
|
||
this.totalPairs = 0;
|
||
this.moves = 0;
|
||
this.selectedPairs = 6;
|
||
this.gameStartTime = null;
|
||
this.timerInterval = null;
|
||
|
||
// Two-player mode variables
|
||
this.gameMode = "single";
|
||
this.turnTimer = 0; // 0 = no timer
|
||
this.currentPlayer = 1;
|
||
this.player1Score = 0;
|
||
this.player2Score = 0;
|
||
this.turnTimeLeft = 0;
|
||
this.turnTimerInterval = null;
|
||
this.playerTurnActive = true;
|
||
this.isFirstMove = true;
|
||
|
||
this.initializeMatching();
|
||
this.bindMatchingEvents();
|
||
}
|
||
|
||
initializeMatching() {
|
||
// Get available cards (same as quiz cards)
|
||
const cardElements = document.querySelectorAll(".flashcard");
|
||
this.cards = Array.from(cardElements).map((card) => ({
|
||
number: parseInt(card.dataset.number),
|
||
svg: card.querySelector(".abacus-container").outerHTML,
|
||
}));
|
||
}
|
||
|
||
bindMatchingEvents() {
|
||
// Remove existing event listeners to prevent duplicates
|
||
document.querySelectorAll(".mode-btn").forEach((btn) => {
|
||
// Clone the button to remove all event listeners
|
||
const newBtn = btn.cloneNode(true);
|
||
btn.parentNode.replaceChild(newBtn, btn);
|
||
});
|
||
|
||
document.querySelectorAll(".timer-btn").forEach((btn) => {
|
||
// Clone the button to remove all event listeners
|
||
const newBtn = btn.cloneNode(true);
|
||
btn.parentNode.replaceChild(newBtn, btn);
|
||
});
|
||
|
||
document.querySelectorAll(".start-game-btn").forEach((btn) => {
|
||
// Clone the button to remove all event listeners
|
||
const newBtn = btn.cloneNode(true);
|
||
btn.parentNode.replaceChild(newBtn, btn);
|
||
});
|
||
|
||
// Mode selection
|
||
document.querySelectorAll(".mode-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
document
|
||
.querySelectorAll(".mode-btn")
|
||
.forEach((b) => b.classList.remove("active"));
|
||
e.target.classList.add("active");
|
||
this.gameMode = e.target.dataset.mode;
|
||
|
||
// Show/hide timer controls for two-player mode
|
||
const timerControls = document.getElementById("timer-controls");
|
||
if (this.gameMode === "two-player") {
|
||
timerControls.style.display = "block";
|
||
} else {
|
||
timerControls.style.display = "none";
|
||
}
|
||
});
|
||
});
|
||
|
||
// Timer selection
|
||
document.querySelectorAll(".timer-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
document
|
||
.querySelectorAll(".timer-btn")
|
||
.forEach((b) => b.classList.remove("active"));
|
||
e.target.classList.add("active");
|
||
this.turnTimer = parseInt(e.target.dataset.timer);
|
||
});
|
||
});
|
||
|
||
// Grid size selection and immediate game start
|
||
document.querySelectorAll(".start-game-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
// Get the pairs count from the clicked button
|
||
const target = e.currentTarget; // Use currentTarget to get the button itself
|
||
this.selectedPairs = parseInt(target.dataset.pairs);
|
||
|
||
// Start the game immediately
|
||
this.startMatching();
|
||
});
|
||
});
|
||
|
||
// Action buttons
|
||
document
|
||
.getElementById("new-matching")
|
||
.addEventListener("click", () => this.newChallenge());
|
||
document
|
||
.getElementById("end-matching")
|
||
.addEventListener("click", () => this.endMatching());
|
||
|
||
// Score modal event listeners
|
||
document
|
||
.querySelector(".matching-score-modal-close")
|
||
.addEventListener("click", () => this.hideScoreModal());
|
||
document
|
||
.getElementById("matching-score-modal-close-btn")
|
||
.addEventListener("click", () => this.hideScoreModal());
|
||
document
|
||
.getElementById("matching-score-modal-new-game")
|
||
.addEventListener("click", () => {
|
||
this.hideScoreModal();
|
||
this.newChallenge();
|
||
});
|
||
|
||
// Close modal when clicking outside
|
||
document
|
||
.getElementById("matching-score-modal")
|
||
.addEventListener("click", (e) => {
|
||
if (e.target.id === "matching-score-modal") {
|
||
this.hideScoreModal();
|
||
}
|
||
});
|
||
}
|
||
|
||
startMatching() {
|
||
// Select random cards for matching
|
||
const shuffledCards = [...this.cards].sort(() => Math.random() - 0.5);
|
||
const selectedCards = shuffledCards.slice(0, this.selectedPairs);
|
||
|
||
// Create pairs: abacus and number
|
||
this.gameCards = [];
|
||
selectedCards.forEach((card) => {
|
||
// Add abacus card
|
||
this.gameCards.push({
|
||
id: `abacus_${card.number}`,
|
||
type: "abacus",
|
||
number: card.number,
|
||
content: card.svg,
|
||
matched: false,
|
||
});
|
||
|
||
// Add number card
|
||
this.gameCards.push({
|
||
id: `number_${card.number}`,
|
||
type: "number",
|
||
number: card.number,
|
||
content: card.number.toString(),
|
||
matched: false,
|
||
});
|
||
});
|
||
|
||
// Shuffle the game cards
|
||
this.gameCards = this.gameCards.sort(() => Math.random() - 0.5);
|
||
this.totalPairs = this.selectedPairs;
|
||
this.matchedPairs = 0;
|
||
this.moves = 0;
|
||
this.flippedCards = [];
|
||
|
||
// Initialize two-player mode variables
|
||
if (this.gameMode === "two-player") {
|
||
this.currentPlayer = 1;
|
||
this.player1Score = 0;
|
||
this.player2Score = 0;
|
||
this.playerTurnActive = true;
|
||
}
|
||
|
||
// Hide configuration controls, show game
|
||
document.querySelector(".matching-controls").style.display = "none";
|
||
document.getElementById("matching-game").style.display = "block";
|
||
document.getElementById("matching-header").style.display = "block";
|
||
|
||
this.renderMatchingGrid();
|
||
this.adjustCardSizes();
|
||
this.startTimer();
|
||
this.setupGameInterface();
|
||
this.updateMatchingStatus(
|
||
this.gameMode === "two-player"
|
||
? "Player 1 starts!"
|
||
: "Find all matching pairs!",
|
||
);
|
||
this.updateMatchingStats();
|
||
|
||
// For two-player mode with timer, show timer but don't start counting until first move
|
||
if (this.gameMode === "two-player" && this.turnTimer > 0) {
|
||
this.turnTimeLeft = this.turnTimer;
|
||
this.updateTurnTimerDisplay();
|
||
this.updateTurnTimerStatus("waiting"); // Show timer is waiting for first move
|
||
}
|
||
}
|
||
|
||
renderMatchingGrid() {
|
||
const grid = document.getElementById("matching-grid");
|
||
|
||
// Set grid class based on number of pairs
|
||
grid.className = "matching-grid";
|
||
if (this.selectedPairs === 6) grid.classList.add("grid-3x4");
|
||
else if (this.selectedPairs === 8) grid.classList.add("grid-4x4");
|
||
else if (this.selectedPairs === 12) grid.classList.add("grid-4x6");
|
||
else if (this.selectedPairs === 15) grid.classList.add("grid-5x6");
|
||
|
||
grid.innerHTML = "";
|
||
|
||
this.gameCards.forEach((card, index) => {
|
||
const cardElement = document.createElement("div");
|
||
cardElement.className = "match-card";
|
||
cardElement.dataset.index = index;
|
||
cardElement.dataset.cardId = card.id;
|
||
cardElement.dataset.number = card.number;
|
||
|
||
const typeClass =
|
||
card.type === "abacus" ? "abacus-type" : "number-type";
|
||
const typeIcon = card.type === "abacus" ? "🧮" : "🔢";
|
||
|
||
cardElement.innerHTML = `
|
||
<div class="match-card-back ${typeClass}">
|
||
<div class="card-type-icon">${typeIcon}</div>
|
||
</div>
|
||
<div class="match-card-content">
|
||
${
|
||
card.type === "number"
|
||
? `<div class="match-card-number">${card.content}</div>`
|
||
: `<div class="match-card-abacus">${card.content}</div>`
|
||
}
|
||
</div>
|
||
`;
|
||
|
||
cardElement.addEventListener("click", () =>
|
||
this.cardClicked(index),
|
||
);
|
||
grid.appendChild(cardElement);
|
||
});
|
||
}
|
||
|
||
cardClicked(index) {
|
||
const card = this.gameCards[index];
|
||
const cardElement = document.querySelector(`[data-index="${index}"]`);
|
||
|
||
// Ignore if card is already flipped or matched
|
||
if (card.matched || cardElement.classList.contains("flipped")) return;
|
||
|
||
// Ignore if two cards are already flipped
|
||
if (this.flippedCards.length >= 2) return;
|
||
|
||
// In two-player mode, ignore clicks if it's not the player's turn
|
||
if (this.gameMode === "two-player" && !this.playerTurnActive) return;
|
||
|
||
// Start timer on first move in two-player mode
|
||
if (
|
||
this.gameMode === "two-player" &&
|
||
this.turnTimer > 0 &&
|
||
this.isFirstMove
|
||
) {
|
||
this.isFirstMove = false;
|
||
this.startTurnTimer();
|
||
this.updateTurnTimerStatus("active");
|
||
}
|
||
|
||
// If one card is already flipped, only allow clicking cards of opposite type
|
||
if (this.flippedCards.length === 1) {
|
||
const flippedCardType = this.flippedCards[0].card.type;
|
||
if (card.type === flippedCardType) {
|
||
// Same type - show visual feedback but don't flip
|
||
this.showInvalidMoveHint(cardElement);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Flip the card
|
||
cardElement.classList.add("flipped");
|
||
this.flippedCards.push({ index, element: cardElement, card });
|
||
|
||
// If this is the first card flipped, highlight valid choices
|
||
if (this.flippedCards.length === 1) {
|
||
this.highlightValidCards(card.type);
|
||
}
|
||
|
||
// If two cards are flipped, check for match
|
||
if (this.flippedCards.length === 2) {
|
||
this.clearHighlights();
|
||
this.stopTurnTimer();
|
||
|
||
if (this.gameMode === "single") {
|
||
this.moves++;
|
||
}
|
||
|
||
this.updateMatchingStats();
|
||
setTimeout(() => this.checkMatch(), 1000);
|
||
}
|
||
}
|
||
|
||
checkMatch() {
|
||
const [first, second] = this.flippedCards;
|
||
|
||
// Check if numbers match and types are different
|
||
if (
|
||
first.card.number === second.card.number &&
|
||
first.card.type !== second.card.type
|
||
) {
|
||
// Match found!
|
||
first.element.classList.add("matched");
|
||
second.element.classList.add("matched");
|
||
first.card.matched = true;
|
||
second.card.matched = true;
|
||
|
||
this.matchedPairs++;
|
||
|
||
// In two-player mode, award point to current player and mark cards
|
||
if (this.gameMode === "two-player") {
|
||
const playerClass = `matched-player${this.currentPlayer}`;
|
||
first.element.classList.add(playerClass);
|
||
second.element.classList.add(playerClass);
|
||
|
||
// Add player badges
|
||
this.addPlayerBadge(first.element, this.currentPlayer);
|
||
this.addPlayerBadge(second.element, this.currentPlayer);
|
||
|
||
if (this.currentPlayer === 1) {
|
||
this.player1Score++;
|
||
} else {
|
||
this.player2Score++;
|
||
}
|
||
// Player gets another turn after a match
|
||
this.updatePlayerStats();
|
||
} else {
|
||
this.updateMatchingStats();
|
||
}
|
||
|
||
// Check if game is complete
|
||
if (this.matchedPairs === this.totalPairs) {
|
||
this.endGame();
|
||
}
|
||
} else {
|
||
// No match - flip cards back
|
||
first.element.classList.remove("flipped");
|
||
second.element.classList.remove("flipped");
|
||
|
||
// In two-player mode, switch turns after a miss
|
||
if (this.gameMode === "two-player") {
|
||
this.switchPlayer();
|
||
}
|
||
}
|
||
|
||
this.flippedCards = [];
|
||
this.clearHighlights();
|
||
this.playerTurnActive = true; // Re-enable clicks
|
||
}
|
||
|
||
endGame() {
|
||
this.stopTimer();
|
||
this.stopTurnTimer();
|
||
const elapsedTime = Date.now() - this.gameStartTime;
|
||
const seconds = Math.floor(elapsedTime / 1000);
|
||
|
||
if (this.gameMode === "two-player") {
|
||
// Two-player results
|
||
let winner, description;
|
||
if (this.player1Score > this.player2Score) {
|
||
winner = "Player 1 Wins!";
|
||
description = `${this.player1Score} - ${this.player2Score}`;
|
||
} else if (this.player2Score > this.player1Score) {
|
||
winner = "Player 2 Wins!";
|
||
description = `${this.player2Score} - ${this.player1Score}`;
|
||
} else {
|
||
winner = "It's a Tie!";
|
||
description = `${this.player1Score} - ${this.player2Score}`;
|
||
}
|
||
|
||
this.showScoreModal({
|
||
gameMode: "two-player",
|
||
winner,
|
||
description,
|
||
player1Score: this.player1Score,
|
||
player2Score: this.player2Score,
|
||
totalPairs: this.totalPairs,
|
||
time: seconds,
|
||
});
|
||
} else {
|
||
// Single player results
|
||
const minimumMoves = this.totalPairs;
|
||
const efficiency = this.moves / minimumMoves;
|
||
|
||
let medal, description;
|
||
if (efficiency <= 1.5) {
|
||
medal = "🏆 Gold";
|
||
description = "Perfect efficiency!";
|
||
} else if (efficiency <= 2.0) {
|
||
medal = "🥈 Silver";
|
||
description = "Great job!";
|
||
} else if (efficiency <= 3.0) {
|
||
medal = "🥉 Bronze";
|
||
description = "Good effort!";
|
||
} else {
|
||
medal = "🎯 Practice";
|
||
description = "Keep practicing!";
|
||
}
|
||
|
||
this.showScoreModal({
|
||
gameMode: "single",
|
||
pairs: this.totalPairs,
|
||
moves: this.moves,
|
||
time: seconds,
|
||
efficiency: efficiency.toFixed(1),
|
||
medal,
|
||
description,
|
||
});
|
||
}
|
||
}
|
||
|
||
showScoreModal(results) {
|
||
const modal = document.getElementById("matching-score-modal");
|
||
const body = document.getElementById("matching-score-modal-body");
|
||
|
||
const timeStr = this.formatTime(results.time);
|
||
|
||
if (results.gameMode === "two-player") {
|
||
// Two-player results layout
|
||
body.innerHTML = `
|
||
<div class="score-summary">
|
||
<div class="score-medal">${results.winner}</div>
|
||
<div class="score-description">${results.description}</div>
|
||
</div>
|
||
|
||
<div class="two-player-results">
|
||
<div class="player-result">
|
||
<div class="player-name">🔵 Player 1</div>
|
||
<div class="player-final-score" style="color: #007bff;">${results.player1Score} pairs</div>
|
||
</div>
|
||
<div class="vs-divider">VS</div>
|
||
<div class="player-result">
|
||
<div class="player-name">🟠 Player 2</div>
|
||
<div class="player-final-score" style="color: #fd7e14;">${results.player2Score} pairs</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="game-summary">
|
||
<div class="summary-item">
|
||
<span class="summary-label">Total Pairs:</span>
|
||
<span class="summary-value">${results.totalPairs}</span>
|
||
</div>
|
||
<div class="summary-item">
|
||
<span class="summary-label">Game Time:</span>
|
||
<span class="summary-value">${timeStr}</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
// Single player results layout
|
||
body.innerHTML = `
|
||
<div class="score-summary">
|
||
<div class="score-medal">${results.medal}</div>
|
||
<div class="score-description">${results.description}</div>
|
||
</div>
|
||
|
||
<div class="score-details">
|
||
<div class="score-item">
|
||
<span class="score-label">Pairs Matched:</span>
|
||
<span class="score-value">${results.pairs}</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="score-label">Total Moves:</span>
|
||
<span class="score-value">${results.moves}</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="score-label">Time:</span>
|
||
<span class="score-value">${timeStr}</span>
|
||
</div>
|
||
<div class="score-item">
|
||
<span class="score-label">Efficiency:</span>
|
||
<span class="score-value">${results.efficiency}x</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="score-explanation">
|
||
<h4>Scoring System</h4>
|
||
<div class="score-tiers">
|
||
<div>🏆 Gold: ≤1.5x minimum moves</div>
|
||
<div>🥈 Silver: ≤2.0x minimum moves</div>
|
||
<div>🥉 Bronze: ≤3.0x minimum moves</div>
|
||
<div>🎯 Practice: >3.0x minimum moves</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
modal.style.display = "block";
|
||
}
|
||
|
||
hideScoreModal() {
|
||
document.getElementById("matching-score-modal").style.display =
|
||
"none";
|
||
}
|
||
|
||
newChallenge() {
|
||
this.endMatching();
|
||
setTimeout(() => this.startMatching(), 100);
|
||
}
|
||
|
||
endMatching() {
|
||
// Stop timer
|
||
this.stopTimer();
|
||
this.stopTurnTimer();
|
||
|
||
// Hide game and sticky header, show configuration controls
|
||
document.getElementById("matching-game").style.display = "none";
|
||
document.getElementById("matching-header").style.display = "none";
|
||
document.querySelector(".matching-controls").style.display = "block";
|
||
|
||
// Reset game state
|
||
this.flippedCards = [];
|
||
this.matchedPairs = 0;
|
||
this.moves = 0;
|
||
this.currentPlayer = 1;
|
||
this.player1Score = 0;
|
||
this.player2Score = 0;
|
||
this.playerTurnActive = true;
|
||
this.isFirstMove = true;
|
||
|
||
// Reset mode selection display but preserve selected values
|
||
this.updateModeDisplay();
|
||
|
||
// Re-bind events to ensure they work after DOM changes
|
||
this.bindMatchingEvents();
|
||
}
|
||
|
||
updateModeDisplay() {
|
||
// Ensure the current game mode button is properly highlighted
|
||
document.querySelectorAll(".mode-btn").forEach((btn) => {
|
||
btn.classList.remove("active");
|
||
if (btn.dataset.mode === this.gameMode) {
|
||
btn.classList.add("active");
|
||
}
|
||
});
|
||
|
||
// Show/hide timer controls based on current mode
|
||
const timerControls = document.getElementById("timer-controls");
|
||
if (this.gameMode === "two-player") {
|
||
timerControls.style.display = "block";
|
||
} else {
|
||
timerControls.style.display = "none";
|
||
}
|
||
|
||
// Ensure timer button is highlighted
|
||
document.querySelectorAll(".timer-btn").forEach((btn) => {
|
||
btn.classList.remove("active");
|
||
if (parseInt(btn.dataset.timer) === this.turnTimer) {
|
||
btn.classList.add("active");
|
||
}
|
||
});
|
||
}
|
||
|
||
startTimer() {
|
||
this.gameStartTime = Date.now();
|
||
this.timerInterval = setInterval(() => {
|
||
const elapsed = Date.now() - this.gameStartTime;
|
||
const seconds = Math.floor(elapsed / 1000);
|
||
document.getElementById("matching-timer").textContent =
|
||
this.formatTime(seconds);
|
||
}, 1000);
|
||
}
|
||
|
||
stopTimer() {
|
||
if (this.timerInterval) {
|
||
clearInterval(this.timerInterval);
|
||
this.timerInterval = null;
|
||
}
|
||
}
|
||
|
||
formatTime(totalSeconds) {
|
||
const minutes = Math.floor(totalSeconds / 60);
|
||
const seconds = totalSeconds % 60;
|
||
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
|
||
}
|
||
|
||
updateMatchingStatus(message) {
|
||
document.getElementById("matching-status").textContent = message;
|
||
}
|
||
|
||
updateMatchingStats() {
|
||
document.getElementById("moves-counter").textContent =
|
||
`Moves: ${this.moves}`;
|
||
document.getElementById("pairs-found").textContent =
|
||
`Pairs: ${this.matchedPairs}/${this.totalPairs}`;
|
||
}
|
||
|
||
adjustCardSizes() {
|
||
// CSS now handles responsive sizing automatically
|
||
// This method can be kept for any future dynamic adjustments if needed
|
||
|
||
// Just ensure font sizes scale with container
|
||
const grid = document.getElementById("matching-grid");
|
||
const cards = grid.querySelectorAll(".match-card");
|
||
|
||
cards.forEach((card) => {
|
||
const cardRect = card.getBoundingClientRect();
|
||
const cardSize = Math.min(cardRect.width, cardRect.height);
|
||
|
||
// Adjust font sizes proportionally to actual card size
|
||
const baseFontSize = Math.max(cardSize * 0.25, 12);
|
||
const iconSize = Math.max(cardSize * 0.4, 16);
|
||
|
||
const number = card.querySelector(".match-card-number");
|
||
if (number) number.style.fontSize = `${baseFontSize}px`;
|
||
|
||
const icon = card.querySelector(".card-type-icon");
|
||
if (icon) icon.style.fontSize = `${iconSize}px`;
|
||
});
|
||
}
|
||
|
||
showInvalidMoveHint(cardElement) {
|
||
// Add temporary visual feedback for invalid moves
|
||
cardElement.classList.add("invalid-move");
|
||
|
||
// Remove the class after animation
|
||
setTimeout(() => {
|
||
cardElement.classList.remove("invalid-move");
|
||
}, 600);
|
||
}
|
||
|
||
highlightValidCards(flippedCardType) {
|
||
// Highlight cards of the opposite type
|
||
const validType = flippedCardType === "abacus" ? "number" : "abacus";
|
||
|
||
this.gameCards.forEach((card, index) => {
|
||
const cardElement = document.querySelector(
|
||
`[data-index="${index}"]`,
|
||
);
|
||
if (!card.matched && !cardElement.classList.contains("flipped")) {
|
||
if (card.type === validType) {
|
||
cardElement.classList.add("valid-choice");
|
||
} else {
|
||
cardElement.classList.add("invalid-choice");
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
clearHighlights() {
|
||
// Remove all highlight classes
|
||
const cards = document.querySelectorAll(".match-card");
|
||
cards.forEach((card) => {
|
||
card.classList.remove("valid-choice", "invalid-choice");
|
||
});
|
||
}
|
||
|
||
setupGameInterface() {
|
||
// Show/hide appropriate UI elements based on game mode
|
||
const singleStats = document.querySelector(".matching-stats");
|
||
const playerStats = document.getElementById("player-stats");
|
||
|
||
if (this.gameMode === "two-player") {
|
||
singleStats.style.display = "none";
|
||
playerStats.style.display = "flex";
|
||
this.updatePlayerStats();
|
||
|
||
// Show turn timer if enabled
|
||
const turnTimer = document.getElementById("turn-timer");
|
||
if (this.turnTimer > 0) {
|
||
turnTimer.style.display = "block";
|
||
turnTimer.textContent = `${this.turnTimer}s`;
|
||
} else {
|
||
turnTimer.style.display = "none";
|
||
}
|
||
} else {
|
||
singleStats.style.display = "flex";
|
||
playerStats.style.display = "none";
|
||
}
|
||
}
|
||
|
||
updatePlayerStats() {
|
||
// Update player scores and current turn indicator
|
||
document.querySelector("#player1-info .player-score").textContent =
|
||
`${this.player1Score} pairs`;
|
||
document.querySelector("#player2-info .player-score").textContent =
|
||
`${this.player2Score} pairs`;
|
||
|
||
// Update active player highlighting
|
||
const player1Info = document.getElementById("player1-info");
|
||
const player2Info = document.getElementById("player2-info");
|
||
const currentTurn = document.getElementById("current-turn");
|
||
|
||
if (this.currentPlayer === 1) {
|
||
player1Info.classList.add("active");
|
||
player2Info.classList.remove("active");
|
||
currentTurn.textContent = "🔵 Player 1's Turn";
|
||
} else {
|
||
player1Info.classList.remove("active");
|
||
player2Info.classList.add("active");
|
||
currentTurn.textContent = "🟠 Player 2's Turn";
|
||
}
|
||
}
|
||
|
||
addPlayerBadge(cardElement, player) {
|
||
// Create player badge element
|
||
const badge = document.createElement("div");
|
||
badge.className = `player-badge player${player}`;
|
||
badge.textContent = player;
|
||
|
||
// Add badge to card
|
||
cardElement.appendChild(badge);
|
||
}
|
||
|
||
switchPlayer() {
|
||
this.currentPlayer = this.currentPlayer === 1 ? 2 : 1;
|
||
this.updatePlayerStats();
|
||
this.updateMatchingStatus(`Player ${this.currentPlayer}'s turn`);
|
||
|
||
// Start turn timer immediately for new player if enabled
|
||
if (this.turnTimer > 0) {
|
||
this.startTurnTimer();
|
||
}
|
||
}
|
||
|
||
startTurnTimer() {
|
||
if (this.turnTimer <= 0) return;
|
||
|
||
this.turnTimeLeft = this.turnTimer;
|
||
this.updateTurnTimerDisplay();
|
||
|
||
this.turnTimerInterval = setInterval(() => {
|
||
this.turnTimeLeft--;
|
||
this.updateTurnTimerDisplay();
|
||
|
||
if (this.turnTimeLeft <= 0) {
|
||
this.handleTurnTimeout();
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
stopTurnTimer() {
|
||
if (this.turnTimerInterval) {
|
||
clearInterval(this.turnTimerInterval);
|
||
this.turnTimerInterval = null;
|
||
}
|
||
}
|
||
|
||
updateTurnTimerDisplay() {
|
||
const timerElement = document.getElementById("turn-timer");
|
||
if (!timerElement || this.turnTimer <= 0) return;
|
||
|
||
timerElement.textContent = `${this.turnTimeLeft}s`;
|
||
|
||
// Add warning/critical classes based on time left
|
||
timerElement.classList.remove("warning", "critical");
|
||
if (this.turnTimeLeft <= 5) {
|
||
timerElement.classList.add("critical");
|
||
} else if (this.turnTimeLeft <= 10) {
|
||
timerElement.classList.add("warning");
|
||
}
|
||
}
|
||
|
||
updateTurnTimerStatus(status) {
|
||
const timerElement = document.getElementById("turn-timer");
|
||
if (!timerElement) return;
|
||
|
||
if (status === "waiting") {
|
||
timerElement.classList.add("waiting");
|
||
const timeString = `${this.turnTimeLeft}s`;
|
||
timerElement.textContent = `⏸️ ${timeString}`;
|
||
} else if (status === "active") {
|
||
timerElement.classList.remove("waiting");
|
||
this.updateTurnTimerDisplay();
|
||
}
|
||
}
|
||
|
||
handleTurnTimeout() {
|
||
this.stopTurnTimer();
|
||
this.playerTurnActive = false;
|
||
|
||
// Clear any flipped cards
|
||
if (this.flippedCards.length > 0) {
|
||
this.flippedCards.forEach((item) => {
|
||
item.element.classList.remove("flipped");
|
||
});
|
||
this.flippedCards = [];
|
||
this.clearHighlights();
|
||
}
|
||
|
||
// Switch to next player
|
||
setTimeout(() => {
|
||
this.switchPlayer();
|
||
this.playerTurnActive = true;
|
||
}, 500);
|
||
}
|
||
}
|
||
|
||
// Function to handle print requests by opening PDF in print dialog
|
||
function handlePrintRequest() {
|
||
console.log("Print request intercepted!");
|
||
// Get the companion PDF URL
|
||
const pdfUrl = window.location.href.replace(/\.html$/, ".pdf");
|
||
|
||
// Create a modal overlay explaining the situation
|
||
const modal = document.createElement("div");
|
||
modal.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
z-index: 10000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
`;
|
||
|
||
const content = document.createElement("div");
|
||
content.style.cssText = `
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 30px;
|
||
max-width: 500px;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
`;
|
||
|
||
const title = document.createElement("h3");
|
||
title.textContent = "Print High-Quality Flashcards";
|
||
title.style.margin = "0 0 20px 0";
|
||
title.style.color = "#333";
|
||
|
||
const explanation = document.createElement("p");
|
||
explanation.innerHTML =
|
||
"The web version is not optimized for printing.<br>For best results, download the PDF version which includes:<br><br>• Proper card sizing and layout<br>• Cut marks for easy trimming<br>• Registration marks for alignment";
|
||
explanation.style.textAlign = "left";
|
||
explanation.style.margin = "0 0 25px 0";
|
||
explanation.style.lineHeight = "1.6";
|
||
explanation.style.color = "#555";
|
||
|
||
const buttonContainer = document.createElement("div");
|
||
buttonContainer.style.cssText = "display: flex; gap: 15px;";
|
||
|
||
const downloadButton = document.createElement("button");
|
||
downloadButton.textContent = "📄 Open PDF";
|
||
downloadButton.style.cssText = `
|
||
padding: 12px 24px;
|
||
background: #007bff;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
`;
|
||
|
||
const cancelButton = document.createElement("button");
|
||
cancelButton.textContent = "Cancel";
|
||
cancelButton.style.cssText = `
|
||
padding: 12px 24px;
|
||
background: #6c757d;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 16px;
|
||
`;
|
||
|
||
// Download button handler
|
||
downloadButton.onclick = function () {
|
||
showNotification("📄 Opening PDF in new tab...");
|
||
window.open(pdfUrl, "_blank");
|
||
modal.remove();
|
||
};
|
||
|
||
// Cancel button handler
|
||
cancelButton.onclick = function () {
|
||
modal.remove();
|
||
};
|
||
|
||
// Close on backdrop click
|
||
modal.onclick = function (e) {
|
||
if (e.target === modal) {
|
||
modal.remove();
|
||
}
|
||
};
|
||
|
||
// Prevent clicks inside content from closing modal
|
||
content.onclick = function (e) {
|
||
e.stopPropagation();
|
||
};
|
||
|
||
// Assemble the modal
|
||
buttonContainer.appendChild(downloadButton);
|
||
buttonContainer.appendChild(cancelButton);
|
||
content.appendChild(title);
|
||
content.appendChild(explanation);
|
||
content.appendChild(buttonContainer);
|
||
modal.appendChild(content);
|
||
document.body.appendChild(modal);
|
||
}
|
||
|
||
// Fallback function to download PDF
|
||
function downloadPDF(pdfUrl) {
|
||
const link = document.createElement("a");
|
||
link.href = pdfUrl;
|
||
link.download = pdfUrl.split("/").pop();
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
// Function to show brief notifications
|
||
function showNotification(message) {
|
||
const notification = document.createElement("div");
|
||
notification.style.cssText = `
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: #28a745;
|
||
color: white;
|
||
padding: 15px 20px;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||
z-index: 10000;
|
||
animation: slideInFromRight 0.3s ease-out;
|
||
`;
|
||
notification.textContent = message;
|
||
|
||
// Add animation styles
|
||
const style = document.createElement("style");
|
||
style.textContent = `
|
||
@keyframes slideInFromRight {
|
||
from { transform: translateX(100%); opacity: 0; }
|
||
to { transform: translateX(0); opacity: 1; }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
document.body.appendChild(notification);
|
||
|
||
// Auto-remove after 3 seconds
|
||
setTimeout(() => {
|
||
notification.style.animation =
|
||
"slideInFromRight 0.3s ease-out reverse";
|
||
setTimeout(() => {
|
||
if (notification.parentNode) {
|
||
document.body.removeChild(notification);
|
||
}
|
||
if (style.parentNode) {
|
||
document.head.removeChild(style);
|
||
}
|
||
}, 300);
|
||
}, 3000);
|
||
}
|
||
|
||
// Section Navigation Manager
|
||
class SectionNavigator {
|
||
constructor() {
|
||
this.currentSection = "introduction";
|
||
this.setupEventListeners();
|
||
}
|
||
|
||
setupEventListeners() {
|
||
document.querySelectorAll(".nav-btn").forEach((btn) => {
|
||
btn.addEventListener("click", (e) => {
|
||
const section = e.target.getAttribute("data-section");
|
||
this.showSection(section);
|
||
});
|
||
});
|
||
}
|
||
|
||
showSection(sectionId) {
|
||
// Hide all sections
|
||
document.querySelectorAll(".page-section").forEach((section) => {
|
||
section.classList.remove("active");
|
||
});
|
||
|
||
// Remove active from all nav buttons
|
||
document.querySelectorAll(".nav-btn").forEach((btn) => {
|
||
btn.classList.remove("active");
|
||
});
|
||
|
||
// Show selected section
|
||
const targetSection = document.getElementById(sectionId);
|
||
if (targetSection) {
|
||
targetSection.classList.add("active");
|
||
}
|
||
|
||
// Activate corresponding nav button
|
||
const targetBtn = document.querySelector(
|
||
`[data-section="${sectionId}"]`,
|
||
);
|
||
if (targetBtn) {
|
||
targetBtn.classList.add("active");
|
||
}
|
||
|
||
this.currentSection = sectionId;
|
||
|
||
// Scroll to top when switching sections
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
}
|
||
}
|
||
|
||
// Initialize quiz and sorting when DOM is loaded
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
new ModalManager();
|
||
new SectionNavigator();
|
||
new SorobanQuiz();
|
||
new SortingChallenge();
|
||
new MatchingChallenge();
|
||
|
||
// Intercept print attempts and download PDF instead
|
||
window.addEventListener("beforeprint", (e) => {
|
||
e.preventDefault();
|
||
handlePrintRequest();
|
||
});
|
||
|
||
// Also intercept Ctrl+P / Cmd+P
|
||
document.addEventListener("keydown", (e) => {
|
||
if ((e.ctrlKey || e.metaKey) && e.key === "p") {
|
||
e.preventDefault();
|
||
handlePrintRequest();
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|