StillHammer
aee1265933
- Add SBS chapter 4 (possessive adjectives and short answers) - Add WTE2 chapter 5 (family activities and short 'a' phonics) - Implement image display in WordDiscoveryModule - Add image support in LetterDiscovery and WordDiscovery games - Update CSS for word cards with images - Load phonics words from letters section with priority 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
72 lines
2.8 KiB
HTML
72 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Test Images</title>
|
|
<style>
|
|
body { font-family: Arial; padding: 20px; }
|
|
img { border: 2px solid #ccc; margin: 10px; max-width: 200px; }
|
|
.test { margin: 20px 0; padding: 15px; border: 1px solid #ddd; }
|
|
.ok { color: green; }
|
|
.error { color: red; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Test Images WTE2-5</h1>
|
|
|
|
<div class="test">
|
|
<h2>Test 1: Direct path content/assets/</h2>
|
|
<img src="content/assets/a_sound.png" alt="a_sound" onerror="this.style.border='3px solid red'; this.nextSibling.textContent='ERROR!'" onload="this.style.border='3px solid green'; this.nextSibling.textContent='OK!'" />
|
|
<span></span>
|
|
<p>Path: content/assets/a_sound.png</p>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 2: Without content/ prefix</h2>
|
|
<img src="assets/a_sound.png" alt="a_sound" onerror="this.style.border='3px solid red'; this.nextSibling.textContent='ERROR!'" onload="this.style.border='3px solid green'; this.nextSibling.textContent='OK!'" />
|
|
<span></span>
|
|
<p>Path: assets/a_sound.png</p>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 3: With leading slash /content/</h2>
|
|
<img src="/content/assets/a_sound.png" alt="a_sound" onerror="this.style.border='3px solid red'; this.nextSibling.textContent='ERROR!'" onload="this.style.border='3px solid green'; this.nextSibling.textContent='OK!'" />
|
|
<span></span>
|
|
<p>Path: /content/assets/a_sound.png</p>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Test 4: All three images</h2>
|
|
<div>
|
|
<img src="content/assets/a_sound.png" alt="a" onload="this.nextSibling.textContent=' ✓'" onerror="this.nextSibling.textContent=' ✗'" />
|
|
<span></span> a_sound.png<br>
|
|
|
|
<img src="content/assets/am_sound.png" alt="am" onload="this.nextSibling.textContent=' ✓'" onerror="this.nextSibling.textContent=' ✗'" />
|
|
<span></span> am_sound.png<br>
|
|
|
|
<img src="content/assets/an_sound.png" alt="an" onload="this.nextSibling.textContent=' ✓'" onerror="this.nextSibling.textContent=' ✗'" />
|
|
<span></span> an_sound.png<br>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test">
|
|
<h2>Console Info</h2>
|
|
<pre id="console-info"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
// Log test results
|
|
setTimeout(() => {
|
|
const images = document.querySelectorAll('img');
|
|
const results = Array.from(images).map(img => ({
|
|
src: img.src,
|
|
loaded: img.complete && img.naturalHeight !== 0,
|
|
error: !img.complete || img.naturalHeight === 0
|
|
}));
|
|
|
|
document.getElementById('console-info').textContent = JSON.stringify(results, null, 2);
|
|
console.log('Image test results:', results);
|
|
}, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|