Troubleshooting
Relevant source files
The following files were used as context for generating this wiki page:
Troubleshooting identifies and resolves issues within the interactive frontend of the yeuems.io application. This system relies on synchronized CSS animations, jQuery-based DOM manipulation, and SweetAlert2 for user interaction. Issues typically arise from asset loading delays, event trigger failures, or script execution order.
The application uses a specific loading sequence where a preloader masks the main content until initialization logic completes. Errors in this phase prevent the user from accessing the interactive "Yes/No" interface.
Preloader and Initialization Issues
The preloader consists of a fixed-position background and a CSS-animated spinner. If the preloader fails to disappear, users cannot interact with the application.
Preloader Logic and Timing
The application uses a hard-coded delay before transitioning from the loading state to the active state. The setTimeout function waits 600ms before executing the firstQuestion() prompt and fading out the preloader elements.
The diagram shows the sequence from initial page load to the first interactive popup.
Sources: js/myJs.js:18-26, css/spinload.css:2-10
Failure to Clear Preloader
If the JavaScript fails to execute, the #preloader div will remain visible because it has a high z-index of 9,999,999. This covers all other content.
- Cause: jQuery fails to load or script execution is blocked.
- Check: Verify external scripts in
index.html(lines 56-78) are reachable.
Sources: index.html:56-78, css/spinload.css:7
Interactive Button Behavior
The "No" button employs complex movement logic to prevent users from clicking it. Troubleshooting this requires understanding the mouse event handlers and coordinate calculations.
Button Evasion Logic
The button utilizes two distinct evasion methods based on the interaction count (n):
- Switch Position: If
n < 1, the "No" and "Yes" buttons swap CSSleftandtopproperties. - Random Move: If
n > 1, the "No" button moves to a random coordinate within specified bounds.
| Event | Condition | Action |
|---|---|---|
| mousemove | n < 1 | Executes switchButton() |
| mousemove | n >= 1 | Executes moveButton() |
| click | width >= 900px | Executes switchButton() |
Sources: js/myJs.js:88-97, js/myJs.js:46-60
Coordinate Bounds Issues
The moveButton() function calculates coordinates based on screen width. If the button moves outside the viewport, users may lose sight of it.
- Mobile Screens (<= 600px): Uses a 300x500 range.
- Desktop Screens: Uses a 500x500 range.
Sources: js/myJs.js:63-71
Input Field and SweetAlert2 Troubleshooting
The secondary popup contains a custom input field (#txtReason) that automatically generates text as the user types.
Auto-Text Generation (textGenerate)
When the user focuses on the #txtReason input, a setInterval triggers every 10ms to append characters from textConfig.text9.
The diagram illustrates the process of intercepting user keystrokes to display a predefined message.
Sources: js/myJs.js:100-112, js/myJs.js:144-152
SweetAlert2 Configuration
If the final confirmation popup does not appear, check the structure of the Swal.fire promise. The application redirects to a Facebook URL only if the result.value is truthy upon closing the reason popup.
Sources: js/myJs.js:130-142
Styling and Layout Conflicts
Responsive design is handled via media queries in css/style.css. Incorrect button placement on mobile devices often stems from these overrides.
| Element | Desktop Positioning | Mobile (max-width: 500px) |
|---|---|---|
| #no button | left: 35%, top: 40vh | left: 7%, top: 40vh |
| #yes button | left: 70%, top: 40vh | left: 58%, top: 40vh |
| Header H2 | font-size: 80px | font-size: 45px |
Sources: css/style.css:5-65
Troubleshooting should begin by confirming the background image img/puung3.jpg is present, as it provides the primary visual context for the #bg element, which is set to blur(4px).
Sources: css/style.css:16-29