1+ // Animation system for math problems
2+ class AnimationSystem {
3+ constructor ( ) {
4+ this . starsContainer = document . getElementById ( 'stars-container' ) ;
5+ }
6+
7+ // Create a star element with random properties
8+ createStar ( ) {
9+ const star = document . createElement ( 'div' ) ;
10+ star . className = 'star' ;
11+ star . textContent = '⭐' ;
12+ star . style . left = Math . random ( ) * window . innerWidth + 'px' ;
13+ star . style . fontSize = `${ Math . random ( ) * 20 + 20 } ; // Random size between 20-40px
14+ star . style . animationDuration = `${ Math . random ( ) * 1.5 + 0.5 } ; // Random duration between 0.5-2s
15+ return star ;
16+ }
17+
18+ // Handle correct answer animation
19+ handleCorrectAnswer ( selectedOption , allOptions , callback ) {
20+ // Disable all options
21+ Array . from ( allOptions ) . forEach ( option => {
22+ option . disabled = true ;
23+ option . onclick = null ;
24+ } ) ;
25+
26+ // Add correct class to the selected option
27+ selectedOption . classList . add ( 'correct' ) ;
28+
29+ // Create and animate stars
30+ const numStars = 10 ; // Consistent number of stars for all problems
31+ for ( let i = 0 ; i < numStars ; i ++ ) {
32+ const star = this . createStar ( ) ;
33+ this . starsContainer . appendChild ( star ) ;
34+ setTimeout ( ( ) => {
35+ star . remove ( ) ;
36+ } , 2000 ) ;
37+ }
38+
39+ // Wait for animation to complete before moving to next problem
40+ setTimeout ( callback , 1000 ) ;
41+ }
42+
43+ // Handle wrong answer animation
44+ handleWrongAnswer ( option ) {
45+ option . classList . add ( 'wrong' ) ;
46+ setTimeout ( ( ) => option . classList . remove ( 'wrong' ) , 500 ) ;
47+ }
48+ }
49+
50+ // Export a single instance to be used across all problems
51+ const animationSystem = new AnimationSystem ( ) ;
0 commit comments