Spaces:

milwright
/

cloze-reader

Running

App Files Files Community

milwright commited on Jun 11

Commit

53d138c

0 Parent(s):

feat: clean cloze reader for HuggingFace Space

Browse files

Simple cloze reading app with progressive levels and no external dependencies.

Files changed (7) hide show

.gitignore +61 -0
.parcelrc +7 -0
.postcssrc.json +5 -0
README.md +38 -0
app.py +12 -0
index.html +211 -0
requirements.txt +2 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,61 @@

+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# Build outputs
+dist/
+.parcel-cache/
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+# Logs
+logs
+*.log
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+# Optional npm cache directory
+.npm
+# Optional eslint cache
+.eslintcache
+# Coverage directory used by tools like istanbul
+coverage/
+# Temporary folders
+tmp/
+temp/
+.aider*
+# Planning documents
+HF_DATASET_INTEGRATION_PLAN.md
+*_PLAN.md
+IMPLEMENTATION_*.md

.parcelrc ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,mjs,jsx,cjs,ts,tsx}": ["@parcel/transformer-js"],
+    "*.css": ["@parcel/transformer-css"]
+  }
+}

.postcssrc.json ADDED Viewed

	@@ -0,0 +1,5 @@

+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}

README.md ADDED Viewed

	@@ -0,0 +1,38 @@

+---
+title: Cloze Reader
+emoji: 📚
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+---
+# Cloze Reader
+An interactive cloze reading practice application with AI-powered assistance. Practice reading comprehension by filling in blanks in classic literature passages.
+## Features
+- **Progressive Level System**: Start with 1 blank, advance to 2-3 blanks as you improve
+- **Smart Hints**: Get word length, first letter, and contextual clues
+- **AI Chat Help**: Click 💬 for intelligent hints about any blank
+- **Classic Literature**: Passages from Project Gutenberg's collection
+- **Level-Appropriate Challenges**: Hints adapt based on your current level
+## How to Use
+1. Read the passage and literary context
+2. Fill in the blank(s) with appropriate words
+3. Use hints or chat help if needed
+4. Submit to see your results and advance levels
+5. Continue practicing with new passages
+## Level System
+- **Levels 1-2**: 1 blank, hints show first and last letter
+- **Levels 3-4**: 2 blanks, hints show first letter only
+- **Level 5+**: 3 blanks, first letter hints
+## Technology
+Built with vanilla JavaScript, powered by AI for intelligent word selection and contextual assistance.

app.py ADDED Viewed

	@@ -0,0 +1,12 @@

+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+app = FastAPI()
+@app.get("/")
+async def read_root():
+    return FileResponse("index.html")
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

index.html ADDED Viewed

	@@ -0,0 +1,211 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cloze Reader</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Special Elite', monospace; background: #faf7f0; }
+        .paper-sheet { background: #fefcf7; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
+        .cloze-input { border: none; border-bottom: 2px solid #000; background: transparent; text-align: center; font-family: inherit; }
+        .typewriter-button { background: #f5f1e8; border: 2px solid #000; font-family: inherit; padding: 8px 16px; cursor: pointer; }
+        .correct { background-color: rgba(16, 185, 129, 0.1); border-color: #10b981; }
+        .incorrect { background-color: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
+    </style>
+</head>
+<body class="min-h-screen p-4">
+    <div class="max-w-4xl mx-auto">
+        <header class="text-center mb-8">
+            <div class="flex items-center justify-center gap-3 mb-2">
+                <span class="text-4xl">📚</span>
+                <h1 class="text-4xl font-bold">Cloze Reader</h1>
+            </div>
+            <p class="text-gray-600">Fill in the blanks to practice reading comprehension</p>
+        </header>
+        <main id="game-container">
+            <div id="loading" class="text-center py-8">
+                <p class="text-lg">Loading passages...</p>
+            </div>
+            <div id="game-area" class="paper-sheet rounded-lg p-6 hidden">
+                <div id="book-info" class="text-sm italic text-gray-600 mb-4"></div>
+                <div id="round-info" class="text-sm bg-amber-100 px-3 py-1 rounded-full inline-block mb-4"></div>
+                <div id="contextualization" class="bg-amber-50 border-l-4 border-amber-500 p-3 mb-4 text-sm"></div>
+                <div id="passage-content" class="text-lg leading-relaxed mb-6"></div>
+                <div id="hints-section" class="bg-yellow-50 border-l-4 border-yellow-500 p-3 mb-4 hidden">
+                    <div class="font-semibold mb-2 text-sm">💡 Hints:</div>
+                    <div id="hints-list" class="text-sm space-y-1"></div>
+                </div>
+                <div class="flex gap-4 justify-center flex-wrap">
+                    <button id="submit-btn" class="typewriter-button">Submit</button>
+                    <button id="next-btn" class="typewriter-button hidden">Next Passage</button>
+                    <button id="hint-btn" class="typewriter-button">Show Hints</button>
+                </div>
+                <div id="result" class="mt-4 text-center font-semibold"></div>
+            </div>
+        </main>
+    </div>
+    <script>
+        // Simple cloze reader implementation
+        class SimpleClozeReader {
+            constructor() {
+                this.currentLevel = 1;
+                this.currentRound = 1;
+                this.blanks = [];
+                this.hints = [];
+                this.books = [
+                    {
+                        title: "Pride and Prejudice",
+                        author: "Jane Austen",
+                        text: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered the rightful property of some one or other of their daughters."
+                    },
+                    {
+                        title: "The Adventures of Tom Sawyer",
+                        author: "Mark Twain",
+                        text: "Tom! No answer. Tom! No answer. What's gone with that boy, I wonder? You TOM! No answer. The old lady pulled her spectacles down and looked over them about the room; then she put them up and looked out under them. She seldom or never looked through them for so small a thing as a boy."
+                    }
+                ];
+                this.init();
+            }
+            init() {
+                this.setupEventListeners();
+                this.startNewRound();
+            }
+            setupEventListeners() {
+                document.getElementById('submit-btn').onclick = () => this.submitAnswers();
+                document.getElementById('next-btn').onclick = () => this.nextRound();
+                document.getElementById('hint-btn').onclick = () => this.toggleHints();
+            }
+            startNewRound() {
+                const book = this.books[Math.floor(Math.random() * this.books.length)];
+                const blanksCount = this.currentLevel <= 2 ? 1 : this.currentLevel <= 4 ? 2 : 3;
+                // Simple word selection
+                const words = book.text.split(' ');
+                const selectedIndices = [];
+                const contentWords = ['truth', 'man', 'fortune', 'wife', 'feelings', 'neighbourhood', 'families', 'daughters', 'answer', 'boy', 'lady', 'spectacles', 'room'];
+                for (let i = 0; i < blanksCount && i < contentWords.length; i++) {
+                    const wordIndex = words.findIndex(w => w.toLowerCase().includes(contentWords[i]));
+                    if (wordIndex !== -1) selectedIndices.push(wordIndex);
+                }
+                // Create blanks
+                this.blanks = selectedIndices.map((index, i) => ({
+                    index: i,
+                    originalWord: words[index].replace(/[^\w]/g, ''),
+                    wordIndex: index
+                }));
+                // Create hints
+                this.hints = this.blanks.map((blank, i) => {
+                    const word = blank.originalWord;
+                    if (this.currentLevel <= 2) {
+                        return `${word.length} letters, starts with "${word[0]}", ends with "${word[word.length-1]}"`;
+                    } else {
+                        return `${word.length} letters, starts with "${word[0]}"`;
+                    }
+                });
+                // Create display text
+                let displayText = book.text;
+                this.blanks.forEach((blank, i) => {
+                    const word = words[blank.wordIndex];
+                    const input = `<input type="text" class="cloze-input w-20 mx-1" data-index="${i}" placeholder="${'_'.repeat(Math.max(3, blank.originalWord.length))}">`;
+                    displayText = displayText.replace(word, input);
+                });
+                // Update UI
+                document.getElementById('book-info').innerHTML = `<strong>${book.title}</strong> by ${book.author}`;
+                document.getElementById('round-info').textContent = `Level ${this.currentLevel} • ${blanksCount} blank${blanksCount > 1 ? 's' : ''}`;
+                document.getElementById('contextualization').innerHTML = `📚 Practice with classic literature from ${book.author}'s "${book.title}"`;
+                document.getElementById('passage-content').innerHTML = displayText;
+                document.getElementById('hints-list').innerHTML = this.hints.map((hint, i) => `<div>${i+1}. ${hint}</div>`).join('');
+                // Show game area
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('game-area').classList.remove('hidden');
+                document.getElementById('hints-section').classList.add('hidden');
+                document.getElementById('result').textContent = '';
+                document.getElementById('submit-btn').classList.remove('hidden');
+                document.getElementById('next-btn').classList.add('hidden');
+            }
+            submitAnswers() {
+                const inputs = document.querySelectorAll('.cloze-input');
+                let correct = 0;
+                inputs.forEach((input, i) => {
+                    const userAnswer = input.value.trim().toLowerCase();
+                    const correctAnswer = this.blanks[i].originalWord.toLowerCase();
+                    if (userAnswer === correctAnswer) {
+                        input.classList.add('correct');
+                        correct++;
+                    } else {
+                        input.classList.add('incorrect');
+                        // Show correct answer
+                        const span = document.createElement('span');
+                        span.className = 'text-green-600 font-semibold ml-2 text-sm';
+                        span.textContent = `✓ ${this.blanks[i].originalWord}`;
+                        input.parentNode.appendChild(span);
+                    }
+                    input.disabled = true;
+                });
+                const percentage = Math.round((correct / this.blanks.length) * 100);
+                const passed = correct >= (this.blanks.length === 1 ? 1 : this.blanks.length - 1);
+                let message = `Score: ${correct}/${this.blanks.length} (${percentage}%)`;
+                if (passed) {
+                    message += ` - Excellent! Advancing to Level ${this.currentLevel + 1}! 🎉`;
+                    document.getElementById('result').className = 'mt-4 text-center font-semibold text-green-600';
+                    this.currentLevel++;
+                } else {
+                    message += ` - Keep practicing! 💪`;
+                    document.getElementById('result').className = 'mt-4 text-center font-semibold text-red-600';
+                }
+                document.getElementById('result').textContent = message;
+                document.getElementById('submit-btn').classList.add('hidden');
+                document.getElementById('next-btn').classList.remove('hidden');
+                this.currentRound++;
+            }
+            nextRound() {
+                document.querySelectorAll('.cloze-input').forEach(input => {
+                    input.classList.remove('correct', 'incorrect');
+                    input.disabled = false;
+                    input.value = '';
+                });
+                document.querySelectorAll('.text-green-600').forEach(el => el.remove());
+                this.startNewRound();
+            }
+            toggleHints() {
+                const hintsSection = document.getElementById('hints-section');
+                const btn = document.getElementById('hint-btn');
+                if (hintsSection.classList.contains('hidden')) {
+                    hintsSection.classList.remove('hidden');
+                    btn.textContent = 'Hide Hints';
+                } else {
+                    hintsSection.classList.add('hidden');
+                    btn.textContent = 'Show Hints';
+                }
+            }
+        }
+        // Initialize when page loads
+        document.addEventListener('DOMContentLoaded', () => {
+            new SimpleClozeReader();
+        });
+    </script>
+</body>
+</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ fastapi==0.104.1
2	+ uvicorn[standard]==0.24.0