Hugging Face's logo

Spaces:
aryansrk
/
aryan-trail
Running

App Files Community
aryan-trail / index.html
aryansrk's picture
aryansrk
Add 3 files
10c4a5a verified
raw
history blame contribute delete
57 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>📚 Interactive Verbs Lesson Plan - Class 5</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Schoolbell&display=swap" rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to right, #f8f4e5, #fff9e6);
}
.handwriting {
font-family: 'Schoolbell', cursive;
}
.tabcontent {
animation: fadeEffect 0.5s;
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
.verb-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.verb-card:hover {
transform: translateY(-5px) rotateX(5deg);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.flip-card {
perspective: 1000px;
}
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
backface-visibility: hidden;
}
.flip-card-back {
transform: rotateY(180deg);
}
.progress-ring__circle {
transition: stroke-dashoffset 0.35s;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body class="min-h-screen">
<!-- Header with animated title -->
<header class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-8 shadow-lg">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-2">
<i class="fas fa-book-open mr-2"></i>
<span class="handwriting text-yellow-300">Interactive</span> Verbs Lesson
</h1>
<p class="text-xl opacity-90">Class 5 English Adventure</p>
</div>
</header>
<!-- Navigation tabs with icons -->
<nav class="bg-white shadow-md sticky top-0 z-10">
<div class="container mx-auto px-4 py-2 flex flex-wrap justify-center gap-2">
<button onclick="openTab(event, 'Overview')" class="flex items-center px-6 py-3 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 transition-all shadow-md hover:shadow-lg active:scale-95">
<i class="fas fa-binoculars mr-2"></i> Overview
</button>
<button onclick="openTab(event, 'LessonPlan')" class="flex items-center px-6 py-3 rounded-full bg-purple-600 text-white hover:bg-purple-700 transition-all shadow-md hover:shadow-lg active:scale-95">
<i class="fas fa-calendar-alt mr-2"></i> Lesson Plan
</button>
<button onclick="openTab(event, 'Activities')" class="flex items-center px-6 py-3 rounded-full bg-pink-600 text-white hover:bg-pink-700 transition-all shadow-md hover:shadow-lg active:scale-95">
<i class="fas fa-gamepad mr-2"></i> Activities
</button>
<button onclick="openTab(event, 'Assessment')" class="flex items-center px-6 py-3 rounded-full bg-teal-600 text-white hover:bg-teal-700 transition-all shadow-md hover:shadow-lg active:scale-95">
<i class="fas fa-chart-line mr-2"></i> Assessment
</button>
<button onclick="openTab(event, 'Practice')" class="flex items-center px-6 py-3 rounded-full bg-amber-600 text-white hover:bg-amber-700 transition-all shadow-md hover:shadow-lg active:scale-95">
<i class="fas fa-pencil-alt mr-2"></i> Practice
</button>
</div>
</nav>
<!-- Main content container -->
<main class="container mx-auto px-4 py-8">
<!-- Overview Tab -->
<div id="Overview" class="tabcontent" style="display: block;">
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-3xl font-bold text-indigo-700 mb-4 flex items-center">
<i class="fas fa-bullseye mr-3"></i> Learning Objectives
</h2>
<ul class="space-y-3">
<li class="flex items-start">
<span class="bg-indigo-100 text-indigo-700 rounded-full p-2 mr-3">
<i class="fas fa-check-circle"></i>
</span>
<span>Define what a verb is and explain its function in a sentence.</span>
</li>
<li class="flex items-start">
<span class="bg-indigo-100 text-indigo-700 rounded-full p-2 mr-3">
<i class="fas fa-check-circle"></i>
</span>
<span>Identify verbs in simple and complex sentences with 90% accuracy.</span>
</li>
<li class="flex items-start">
<span class="bg-indigo-100 text-indigo-700 rounded-full p-2 mr-3">
<i class="fas fa-check-circle"></i>
</span>
<span>Differentiate between action verbs (run, jump) and state verbs (know, like).</span>
</li>
<li class="flex items-start">
<span class="bg-indigo-100 text-indigo-700 rounded-full p-2 mr-3">
<i class="fas fa-check-circle"></i>
</span>
<span>Use correct verb forms in written and spoken sentences.</span>
</li>
<li class="flex items-start">
<span class="bg-indigo-100 text-indigo-700 rounded-full p-2 mr-3">
<i class="fas fa-check-circle"></i>
</span>
<span>Create original sentences using different verb types.</span>
</li>
</ul>
</section>
<div class="grid md:grid-cols-2 gap-8">
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-3xl font-bold text-purple-700 mb-4 flex items-center">
<i class="fas fa-clock mr-3"></i> Duration
</h2>
<div class="flex items-center">
<div class="relative w-24 h-24 mr-6">
<svg class="w-full h-full" viewBox="0 0 36 36">
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#e0e0e0"
stroke-width="3"
stroke-dasharray="100, 100"
/>
<path
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#8e44ad"
stroke-width="3"
stroke-dasharray="40, 100"
class="progress-ring__circle"
/>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-2xl font-bold text-purple-700">40</span>
</div>
</div>
<div>
<p class="text-xl font-semibold text-gray-800">Minutes</p>
<p class="text-gray-600">One engaging session</p>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-3xl font-bold text-teal-700 mb-4 flex items-center">
<i class="fas fa-award mr-3"></i> Standards
</h2>
<div class="bg-teal-50 rounded-lg p-4">
<p class="font-medium text-teal-800">CCSS.ELA-LITERACY.L.5.1</p>
<p class="text-gray-700">Demonstrate command of the conventions of standard English grammar and usage when writing or speaking.</p>
</div>
</section>
</div>
</div>
<!-- Lesson Plan Tab -->
<div id="LessonPlan" class="tabcontent">
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-3xl font-bold text-purple-700 mb-6 flex items-center">
<i class="fas fa-tools mr-3"></i> Materials Required
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-chalkboard-teacher text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Whiteboard/Blackboard</span>
</div>
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-marker text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Markers/Chalk</span>
</div>
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-images text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Verb Flashcards</span>
</div>
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-file-alt text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Worksheets</span>
</div>
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-laptop text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Projector/Computer</span>
</div>
<div class="flex items-center bg-purple-50 rounded-lg p-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-print text-purple-600 text-xl"></i>
</div>
<span class="font-medium">Printed Sentences</span>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-3xl font-bold text-purple-700 mb-6 flex items-center">
<i class="fas fa-list-ol mr-3"></i> Lesson Outline
</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-purple-600 text-white">
<tr>
<th class="py-3 px-4 text-left">Time</th>
<th class="py-3 px-4 text-left">Activity</th>
<th class="py-3 px-4 text-left">Description</th>
<th class="py-3 px-4 text-left">Resources</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">5 min</td>
<td class="py-4 px-4">
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-sm">Warm-Up</span>
</td>
<td class="py-4 px-4">Ask students to name actions they do daily (e.g., eat, play, sleep). Write them on the board. Introduce these as "verbs."</td>
<td class="py-4 px-4">
<i class="fas fa-chalkboard text-gray-500 mr-2"></i>
<i class="fas fa-marker text-gray-500"></i>
</td>
</tr>
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">10 min</td>
<td class="py-4 px-4">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Explanation</span>
</td>
<td class="py-4 px-4">Define verbs. Explain types: Action Verbs (run, jump) and State Verbs (know, like). Show examples.</td>
<td class="py-4 px-4">
<i class="fas fa-images text-gray-500 mr-2"></i>
<i class="fas fa-laptop text-gray-500"></i>
</td>
</tr>
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">5 min</td>
<td class="py-4 px-4">
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">Video</span>
</td>
<td class="py-4 px-4">Show a short animated video explaining verbs with examples.</td>
<td class="py-4 px-4">
<i class="fas fa-laptop text-gray-500 mr-2"></i>
<i class="fas fa-video text-gray-500"></i>
</td>
</tr>
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">10 min</td>
<td class="py-4 px-4">
<span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-sm">Group Work</span>
</td>
<td class="py-4 px-4">In groups, students identify verbs from printed sentences and present to class.</td>
<td class="py-4 px-4">
<i class="fas fa-print text-gray-500 mr-2"></i>
<i class="fas fa-users text-gray-500"></i>
</td>
</tr>
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">5 min</td>
<td class="py-4 px-4">
<span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-sm">Worksheet</span>
</td>
<td class="py-4 px-4">Students complete a worksheet identifying verbs in sentences.</td>
<td class="py-4 px-4">
<i class="fas fa-file-alt text-gray-500 mr-2"></i>
<i class="fas fa-pencil-alt text-gray-500"></i>
</td>
</tr>
<tr class="hover:bg-purple-50">
<td class="py-4 px-4 font-medium">5 min</td>
<td class="py-4 px-4">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-sm">Wrap-Up</span>
</td>
<td class="py-4 px-4">Quick recap of key points. Assign homework: write 5 sentences using verbs.</td>
<td class="py-4 px-4">
<i class="fas fa-home text-gray-500 mr-2"></i>
<i class="fas fa-book text-gray-500"></i>
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
<!-- Activities Tab -->
<div id="Activities" class="tabcontent">
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-3xl font-bold text-pink-600 mb-6 flex items-center">
<i class="fas fa-gamepad mr-3"></i> Interactive Activities
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Activity 1 -->
<div class="bg-gradient-to-br from-pink-50 to-purple-50 rounded-xl shadow-md overflow-hidden verb-card">
<div class="p-5">
<div class="flex items-center mb-4">
<div class="bg-pink-100 p-3 rounded-full mr-4">
<i class="fas fa-search text-pink-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-pink-700">Verb Hunt</h3>
</div>
<p class="text-gray-700 mb-4">Students search for verbs in provided texts and highlight them.</p>
<button onclick="toggleAccordion('huntDetails')" class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded-lg transition-all flex items-center justify-center">
<span>Show Details</span>
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="huntDetails" class="hidden mt-4 p-4 bg-white rounded-lg">
<h4 class="font-bold text-gray-800 mb-2">Instructions:</h4>
<ol class="list-decimal pl-5 space-y-1 text-gray-700">
<li>Divide students into groups of 3-4</li>
<li>Give each group a short paragraph</li>
<li>Students underline all verbs they find</li>
<li>Groups compare their findings</li>
<li>Discuss any differences as a class</li>
</ol>
<div class="mt-3">
<span class="inline-block bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs font-medium">Time: 10 min</span>
<span class="inline-block bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Group Activity</span>
</div>
</div>
</div>
</div>
<!-- Activity 2 -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-md overflow-hidden verb-card">
<div class="p-5">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-lightbulb text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-blue-700">Sentence Creation</h3>
</div>
<p class="text-gray-700 mb-4">Students create original sentences using provided verbs.</p>
<button onclick="toggleAccordion('sentenceDetails')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-all flex items-center justify-center">
<span>Show Details</span>
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="sentenceDetails" class="hidden mt-4 p-4 bg-white rounded-lg">
<h4 class="font-bold text-gray-800 mb-2">Instructions:</h4>
<ol class="list-decimal pl-5 space-y-1 text-gray-700">
<li>Each student draws a verb card</li>
<li>Students write a creative sentence</li>
<li>Volunteers read their sentences aloud</li>
<li>Class votes on most creative sentence</li>
</ol>
<div class="mt-3">
<span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium">Time: 8 min</span>
<span class="inline-block bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Individual</span>
</div>
</div>
</div>
</div>
<!-- Activity 3 -->
<div class="bg-gradient-to-br from-yellow-50 to-amber-50 rounded-xl shadow-md overflow-hidden verb-card">
<div class="p-5">
<div class="flex items-center mb-4">
<div class="bg-yellow-100 p-3 rounded-full mr-4">
<i class="fas fa-theater-masks text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-amber-700">Verb Charades</h3>
</div>
<p class="text-gray-700 mb-4">Students act out verbs while classmates guess the action.</p>
<button onclick="toggleAccordion('charadesDetails')" class="w-full bg-amber-600 hover:bg-amber-700 text-white py-2 px-4 rounded-lg transition-all flex items-center justify-center">
<span>Show Details</span>
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="charadesDetails" class="hidden mt-4 p-4 bg-white rounded-lg">
<h4 class="font-bold text-gray-800 mb-2">Instructions:</h4>
<ol class="list-decimal pl-5 space-y-1 text-gray-700">
<li>One student draws a verb card</li>
<li>They act out the verb without speaking</li>
<li>Classmates guess the verb</li>
<li>Correct guesser goes next</li>
</ol>
<div class="mt-3">
<span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium">Time: 12 min</span>
<span class="inline-block bg-amber-100 text-amber-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Whole Class</span>
</div>
</div>
</div>
</div>
<!-- Activity 4 -->
<div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl shadow-md overflow-hidden verb-card">
<div class="p-5">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-puzzle-piece text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-teal-700">Verb Match</h3>
</div>
<p class="text-gray-700 mb-4">Match verbs with corresponding pictures or definitions.</p>
<button onclick="toggleAccordion('matchDetails')" class="w-full bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded-lg transition-all flex items-center justify-center">
<span>Show Details</span>
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="matchDetails" class="hidden mt-4 p-4 bg-white rounded-lg">
<h4 class="font-bold text-gray-800 mb-2">Instructions:</h4>
<ol class="list-decimal pl-5 space-y-1 text-gray-700">
<li>Prepare cards with verbs and images</li>
<li>Students work in pairs to match them</li>
<li>Check answers as a class</li>
<li>Discuss any challenging matches</li>
</ol>
<div class="mt-3">
<span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium">Time: 10 min</span>
<span class="inline-block bg-teal-100 text-teal-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Pairs</span>
</div>
</div>
</div>
</div>
<!-- Activity 5 -->
<div class="bg-gradient-to-br from-red-50 to-pink-50 rounded-xl shadow-md overflow-hidden verb-card">
<div class="p-5">
<div class="flex items-center mb-4">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i class="fas fa-running text-red-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-red-700">Action Relay</h3>
</div>
<p class="text-gray-700 mb-4">Physical activity where students perform verbs in sequence.</p>
<button onclick="toggleAccordion('relayDetails')" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-lg transition-all flex items-center justify-center">
<span>Show Details</span>
<i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="relayDetails" class="hidden mt-4 p-4 bg-white rounded-lg">
<h4 class="font-bold text-gray-800 mb-2">Instructions:</h4>
<ol class="list-decimal pl-5 space-y-1 text-gray-700">
<li>Divide class into two teams</li>
<li>Call out a verb (e.g., "jump")</li>
<li>First team member performs action</li>
<li>Next team member performs new action</li>
<li>Continue until all have participated</li>
</ol>
<div class="mt-3">
<span class="inline-block bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium">Time: 15 min</span>
<span class="inline-block bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Teams</span>
</div>
</div>
</div>
</div>
<!-- Activity 6 -->
<div class="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl shadow-md overflow-hidden verb-card flip-card" style="height: 100%;">
<div class="flip-card-inner" style="height: 100%;">
<div class="flip-card-front p-5" style="height: 100%;">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 p-3 rounded-full mr-4">
<i class="fas fa-book text-indigo-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-indigo-700">Verb Story</h3>
</div>
<p class="text-gray-700">Create a story using provided verbs. Click to see details!</p>
</div>
<div class="flip-card-back p-5 bg-indigo-600 text-white" style="height: 100%;">
<h3 class="text-xl font-bold mb-3">Verb Story Activity</h3>
<p class="mb-3">Students create a collaborative story using assigned verbs.</p>
<ul class="text-sm space-y-1">
<li><i class="fas fa-check-circle mr-2"></i> Time: 12 minutes</li>
<li><i class="fas fa-users mr-2"></i> Small groups</li>
<li><i class="fas fa-star mr-2"></i> Encourages creativity</li>
</ul>
<button onclick="toggleAccordion('storyDetails')" class="mt-4 w-full bg-white text-indigo-600 py-2 px-4 rounded-lg transition-all">
Full Instructions
</button>
</div>
</div>
</div>
</div>
<div id="storyDetails" class="hidden mt-6 bg-white rounded-xl shadow-lg p-6">
<h3 class="text-2xl font-bold text-indigo-700 mb-4">Verb Story - Full Instructions</h3>
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-bold text-gray-800 mb-2">Setup:</h4>
<ol class="list-decimal pl-5 space-y-2 text-gray-700">
<li>Prepare 5-6 verb cards per group</li>
<li>Divide class into groups of 4-5 students</li>
<li>Provide each group with paper and markers</li>
<li>Set a time limit (8-10 minutes)</li>
</ol>
</div>
<div>
<h4 class="font-bold text-gray-800 mb-2">Activity Flow:</h4>
<ol class="list-decimal pl-5 space-y-2 text-gray-700">
<li>Groups draw 5 verb cards at random</li>
<li>They must use all verbs in a short story</li>
<li>One member writes while others contribute ideas</li>
<li>Groups share stories with the class</li>
</ol>
</div>
</div>
<div class="mt-6">
<h4 class="font-bold text-gray-800 mb-2">Example Verbs:</h4>
<div class="flex flex-wrap gap-2">
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">run</span>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">discover</span>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">laugh</span>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">build</span>
<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full">sing</span>
</div>
</div>
<div class="mt-6 flex justify-between items-center">
<div>
<span class="inline-block bg-indigo-100 text-indigo-800 px-2 py-1 rounded-full text-xs font-medium">Time: 12 min</span>
<span class="inline-block bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs font-medium ml-2">Small Groups</span>
</div>
<button onclick="toggleAccordion('storyDetails')" class="bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition-all">
Close Instructions
</button>
</div>
</div>
</section>
</div>
<!-- Assessment Tab -->
<div id="Assessment" class="tabcontent">
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-3xl font-bold text-teal-700 mb-6 flex items-center">
<i class="fas fa-chart-line mr-3"></i> Student Progress
</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<canvas id="progressChart" height="300"></canvas>
</div>
<div>
<div class="bg-teal-50 rounded-lg p-6 h-full">
<h3 class="text-xl font-bold text-teal-800 mb-4">Class Performance</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="font-medium text-gray-700">Verb Identification</span>
<span class="font-bold text-teal-700">92%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-teal-600 h-2.5 rounded-full" style="width: 92%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium text-gray-700">Sentence Creation</span>
<span class="font-bold text-teal-700">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-teal-600 h-2.5 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium text-gray-700">Participation</span>
<span class="font-bold text-teal-700">95%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-teal-600 h-2.5 rounded-full" style="width: 95%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="font-medium text-gray-700">Homework Completion</span>
<span class="font-bold text-teal-700">88%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-teal-600 h-2.5 rounded-full" style="width: 88%"></div>
</div>
</div>
</div>
<div class="mt-6 bg-white p-4 rounded-lg shadow-sm">
<h4 class="font-bold text-gray-800 mb-2">Teacher Notes:</h4>
<textarea class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-teal-500 focus:border-teal-500" rows="3" placeholder="Add observations about class performance..."></textarea>
<button class="mt-2 bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded-lg transition-all">
Save Notes
</button>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-3xl font-bold text-teal-700 mb-6 flex items-center">
<i class="fas fa-clipboard-check mr-3"></i> Assessment Methods
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-6 shadow-sm verb-card">
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-comments text-blue-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-blue-700">Oral Participation</h3>
</div>
<p class="text-gray-700 mb-4">Track student engagement during discussions and activities.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Class Discussion</span>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Q&A</span>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-6 shadow-sm verb-card">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-file-alt text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-purple-700">Worksheets</h3>
</div>
<p class="text-gray-700 mb-4">Evaluate accuracy in identifying and using verbs.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Verb ID</span>
<span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Sentence Completion</span>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-6 shadow-sm verb-card">
<div class="flex items-center mb-4">
<div class="bg-green-100 p-3 rounded-full mr-4">
<i class="fas fa-home text-green-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-teal-700">Homework</h3>
</div>
<p class="text-gray-700 mb-4">Assess independent application of verb concepts.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Sentence Writing</span>
<span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Verb Practice</span>
</div>
</div>
<div class="bg-gradient-to-br from-yellow-50 to-amber-50 rounded-xl p-6 shadow-sm verb-card">
<div class="flex items-center mb-4">
<div class="bg-yellow-100 p-3 rounded-full mr-4">
<i class="fas fa-gamepad text-yellow-600 text-xl"></i>
</div>
<h3 class="text-xl font-bold text-amber-700">Activities</h3>
</div>
<p class="text-gray-700 mb-4">Observe application during interactive exercises.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Group Work</span>
<span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">Games</span>
</div>
</div>
</div>
<div class="mt-8 bg-white border border-gray-200 rounded-xl shadow-sm p-6">
<h3 class="text-2xl font-bold text-gray-800 mb-4">Assessment Rubric</h3>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded-lg overflow-hidden">
<thead class="bg-teal-600 text-white">
<tr>
<th class="py-3 px-4 text-left">Criteria</th>
<th class="py-3 px-4 text-left">Excellent (4)</th>
<th class="py-3 px-4 text-left">Good (3)</th>
<th class="py-3 px-4 text-left">Developing (2)</th>
<th class="py-3 px-4 text-left">Needs Work (1)</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr class="hover:bg-teal-50">
<td class="py-4 px-4 font-medium">Verb Identification</td>
<td class="py-4 px-4">Identifies all verbs correctly</td>
<td class="py-4 px-4">Identifies most verbs correctly</td>
<td class="py-4 px-4">Identifies some verbs correctly</td>
<td class="py-4 px-4">Struggles to identify verbs</td>
</tr>
<tr class="hover:bg-teal-50">
<td class="py-4 px-4 font-medium">Verb Usage</td>
<td class="py-4 px-4">Always uses correct verb forms</td>
<td class="py-4 px-4">Usually uses correct verb forms</td>
<td class="py-4 px-4">Sometimes uses correct verb forms</td>
<td class="py-4 px-4">Frequently uses incorrect forms</td>
</tr>
<tr class="hover:bg-teal-50">
<td class="py-4 px-4 font-medium">Participation</td>
<td class="py-4 px-4">Actively participates in all activities</td>
<td class="py-4 px-4">Participates in most activities</td>
<td class="py-4 px-4">Participates when prompted</td>
<td class="py-4 px-4">Rarely participates</td>
</tr>
<tr class="hover:bg-teal-50">
<td class="py-4 px-4 font-medium">Creativity</td>
<td class="py-4 px-4">Creates highly original sentences</td>
<td class="py-4 px-4">Creates somewhat original sentences</td>
<td class="py-4 px-4">Creates basic sentences</td>
<td class="py-4 px-4">Struggles to create sentences</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
<!-- Practice Tab -->
<div id="Practice" class="tabcontent">
<section class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-3xl font-bold text-amber-600 mb-6 flex items-center">
<i class="fas fa-pencil-alt mr-3"></i> Interactive Practice
</h2>
<div class="grid md:grid-cols-2 gap-8">
<!-- Verb Identification Exercise -->
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-md p-6 verb-card">
<h3 class="text-xl font-bold text-blue-700 mb-4 flex items-center">
<i class="fas fa-search mr-2"></i> Verb Identification
</h3>
<p class="text-gray-700 mb-4">Read the sentence and click on all the verbs you can find.</p>
<div class="bg-white rounded-lg p-4 shadow-sm mb-4">
<p class="text-lg" id="sentenceToAnalyze">The quick brown fox jumps over the lazy dog while singing a happy tune.</p>
</div>
<div class="flex flex-wrap gap-2 mb-4" id="wordOptions">
<!-- Words will be inserted here by JavaScript -->
</div>
<div class="flex justify-between items-center">
<button onclick="checkVerbAnswers()" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-all">
Check Answers
</button>
<button onclick="newSentence()" class="text-blue-600 hover:text-blue-800 font-medium">
<i class="fas fa-redo mr-1"></i> New Sentence
</button>
</div>
<div id="verbFeedback" class="hidden mt-4 p-3 rounded-lg"></div>
</div>
<!-- Sentence Creation Exercise -->
<div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl shadow-md p-6 verb-card">
<h3 class="text-xl font-bold text-teal-700 mb-4 flex items-center">
<i class="fas fa-lightbulb mr-2"></i> Sentence Creation
</h3>
<p class="text-gray-700 mb-4">Create a sentence using the given verb.</p>
<div class="bg-white rounded-lg p-4 shadow-sm mb-4 text-center">
<span id="currentVerb" class="text-2xl font-bold text-teal-700">run</span>
</div>
<div class="mb-4">
<label for="studentSentence" class="block text-gray-700 mb-2">Your Sentence:</label>
<textarea id="studentSentence" class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-teal-500 focus:border-teal-500" rows="2" placeholder="Type your sentence here..."></textarea>
</div>
<div class="flex justify-between items-center">
<button onclick="checkSentence()" class="bg-teal-600 hover:bg-teal-700 text-white py-2 px-4 rounded-lg transition-all">
Check Sentence
</button>
<button onclick="newVerb()" class="text-teal-600 hover:text-teal-800 font-medium">
<i class="fas fa-redo mr-1"></i> New Verb
</button>
</div>
<div id="sentenceFeedback" class="hidden mt-4 p-3 rounded-lg"></div>
</div>
</div>
</section>
<!-- Verb Flashcards -->
<section class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-3xl font-bold text-purple-600 mb-6 flex items-center">
<i class="fas fa-images mr-3"></i> Verb Flashcards
</h2>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">
<div class="flashcard bg-gradient-to-br from-pink-50 to-purple-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-running text-4xl text-pink-600 mb-3"></i>
<p class="font-bold text-pink-700">Run</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">Action verb: To move quickly on foot</p>
<p class="mt-2 text-xs text-gray-600">Example: "She runs every morning."</p>
</div>
</div>
<div class="flashcard bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-book text-4xl text-blue-600 mb-3"></i>
<p class="font-bold text-blue-700">Read</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">Action verb: To look at and understand written words</p>
<p class="mt-2 text-xs text-gray-600">Example: "He reads the newspaper daily."</p>
</div>
</div>
<div class="flashcard bg-gradient-to-br from-yellow-50 to-amber-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-lightbulb text-4xl text-amber-600 mb-3"></i>
<p class="font-bold text-amber-700">Know</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">State verb: To have knowledge or information</p>
<p class="mt-2 text-xs text-gray-600">Example: "I know the answer."</p>
</div>
</div>
<div class="flashcard bg-gradient-to-br from-green-50 to-teal-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-tree text-4xl text-green-600 mb-3"></i>
<p class="font-bold text-green-700">Grow</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">Action verb: To increase in size or develop</p>
<p class="mt-2 text-xs text-gray-600">Example: "Plants grow with sunlight."</p>
</div>
</div>
<div class="flashcard bg-gradient-to-br from-red-50 to-pink-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-heart text-4xl text-red-600 mb-3"></i>
<p class="font-bold text-red-700">Love</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">State verb: To have deep affection for</p>
<p class="mt-2 text-xs text-gray-600">Example: "They love their family."</p>
</div>
</div>
<div class="flashcard bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg shadow-md p-4 text-center cursor-pointer transition-all hover:shadow-lg" onclick="showFlashcard(this)">
<div class="front">
<i class="fas fa-brain text-4xl text-purple-600 mb-3"></i>
<p class="font-bold text-purple-700">Think</p>
</div>
<div class="back hidden">
<p class="text-sm text-gray-700">Action verb: To use your mind to consider something</p>
<p class="mt-2 text-xs text-gray-600">Example: "I think about my future."</p>
</div>
</div>
</div>
<div class="text-center">
<button onclick="shuffleFlashcards()" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-6 rounded-full transition-all shadow-md">
<i class="fas fa-random mr-2"></i> Shuffle Flashcards
</button>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-6 shadow-lg">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center space-x-6 mb-4">
<a href="#" class="text-white hover:text-yellow-300 transition-all">
<i class="fab fa-facebook-f text-xl"></i>
</a>
<a href="#" class="text-white hover:text-yellow-300 transition-all">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-white hover:text-yellow-300 transition-all">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-white hover:text-yellow-300 transition-all">
<i class="fab fa-youtube text-xl"></i>
</a>
</div>
<p class="mb-2">Designed with <i class="fas fa-heart text-red-300"></i> by Your Teaching Team</p>
<p class="text-sm opacity-80">© 2023 Class 5 English Adventure. All rights reserved.</p>
</div>
</footer>
<script>
// Tab functionality
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByTagName("button");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" bg-indigo-700", "");
tablinks[i].className = tablinks[i].className.replace(" bg-purple-700", "");
tablinks[i].className = tablinks[i].className.replace(" bg-pink-700", "");
tablinks[i].className = tablinks[i].className.replace(" bg-teal-700", "");
tablinks[i].className = tablinks[i].className.replace(" bg-amber-700", "");
}
document.getElementById(tabName).style.display = "block";
// Add active class to clicked button
if (evt.currentTarget.className.includes('bg-indigo-600')) {
evt.currentTarget.className += " bg-indigo-700";
} else if (evt.currentTarget.className.includes('bg-purple-600')) {
evt.currentTarget.className += " bg-purple-700";
} else if (evt.currentTarget.className.includes('bg-pink-600')) {
evt.currentTarget.className += " bg-pink-700";
} else if (evt.currentTarget.className.includes('bg-teal-600')) {
evt.currentTarget.className += " bg-teal-700";
} else if (evt.currentTarget.className.includes('bg-amber-600')) {
evt.currentTarget.className += " bg-amber-700";
}
}
// Accordion functionality
function toggleAccordion(id) {
var element = document.getElementById(id);
if (element.style.display === "none" || element.style.display === "") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}
// Show flashcard back
function showFlashcard(element) {
var front = element.querySelector('.front');
var back = element.querySelector('.back');
if (front.style.display === "none") {
front.style.display = "block";
back.style.display = "none";
} else {
front.style.display = "none";
back.style.display = "block";
}
}
// Shuffle flashcards
function shuffleFlashcards() {
var container = document.querySelector('.grid');
for (var i = container.children.length; i >= 0; i--) {
container.appendChild(container.children[Math.random() * i | 0]);
}
}
// Verb identification practice
var sentences = [
"The cat sleeps on the warm sofa while dreaming of fish.",
"Children play in the park and laugh loudly with joy.",
"She writes a letter to her friend and mails it quickly.",
"Birds fly south for the winter when the weather turns cold.",
"We study hard for our exams to achieve good grades."
];
var currentSentence = "";
var verbsInSentence = [];
function setupSentence() {
currentSentence = sentences[Math.floor(Math.random() * sentences.length)];
document.getElementById('sentenceToAnalyze').textContent = currentSentence;
// Clear previous options
var wordOptions = document.getElementById('wordOptions');
wordOptions.innerHTML = '';
// Split sentence into words and create buttons
var words = currentSentence.split(' ');
words.forEach(function(word) {
// Remove punctuation from the word for comparison
var cleanWord = word.replace(/[.,!?;:"]/g, '');
var button = document.createElement('button');
button.textContent = word;
button.className = 'bg-white hover:bg-blue-100 text-gray-800 py-2 px-3 rounded-lg border border-gray-300 transition-all';
button.onclick = function() {
this.classList.toggle('bg-blue-600');
this.classList.toggle('text-white');
this.classList.toggle('hover:bg-blue-700');
};
wordOptions.appendChild(button);
});
// Hide feedback
document.getElementById('verbFeedback').style.display = 'none';
}
function checkVerbAnswers() {
var selectedButtons = document.querySelectorAll('#wordOptions button.bg-blue-600');
var selectedWords = Array.from(selectedButtons).map(btn => btn.textContent.replace(/[.,!?;:"]/g, ''));
// These would normally come from a more sophisticated analysis
// For demo purposes, we'll hardcode some verbs for each sentence
var correctVerbs = [];
if (currentSentence.includes("sleeps")) correctVerbs = ["sleeps", "dreaming"];
else if (currentSentence.includes("play")) correctVerbs = ["play", "laugh"];
else if (currentSentence.includes("writes")) correctVerbs = ["writes", "mails"];
else if (currentSentence.includes("fly")) correctVerbs = ["fly", "turns"];
else if (currentSentence.includes("study")) correctVerbs = ["study", "achieve"];
var correctCount = 0;
var incorrectCount = 0;
selectedWords.forEach(word => {
if (correctVerbs.includes(word.toLowerCase())) correctCount++;
else incorrectCount++;
});
var missedCount = correctVerbs.filter(v => !selectedWords.includes(v)).length;
var feedback = document.getElementById('verbFeedback');
feedback.innerHTML = '';
feedback.style.display = 'block';
if (correctCount === correctVerbs.length && incorrectCount === 0 && missedCount === 0) {
feedback.className = 'bg-green-100 text-green-800 mt-4 p-3 rounded-lg';
feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Perfect! You found all the verbs.';
} else {
feedback.className = 'bg-yellow-100 text-yellow-800 mt-4 p-3 rounded-lg';
var html = '<i class="fas fa-info-circle mr-2"></i> ';
if (correctCount > 0) {
html += `You correctly identified ${correctCount} verb(s). `;
}
if (incorrectCount > 0) {
html += `You selected ${incorrectCount} word(s) that are not verbs. `;
}
if (missedCount > 0) {
html += `You missed ${missedCount} verb(s). `;
}
html += `<br><span class="text-sm mt-1 block">The verbs were: ${correctVerbs.join(', ')}</span>`;
feedback.innerHTML = html;
}
}
function newSentence() {
setupSentence();
}
// Sentence creation practice
var verbs = ["run", "jump", "write", "read", "sing", "dance", "think", "create", "build", "solve"];
function setupVerb() {
var randomVerb = verbs[Math.floor(Math.random() * verbs.length)];
document.getElementById('currentVerb').textContent = randomVerb;
document.getElementById('studentSentence').value = '';
document.getElementById('sentenceFeedback').style.display = 'none';
}
function checkSentence() {
var verb = document.getElementById('currentVerb').textContent;
var sentence = document.getElementById('studentSentence').value.trim();
var feedback = document.getElementById('sentenceFeedback');
if (!sentence) {
feedback.className = 'bg-red-100 text-red-800 mt-4 p-3 rounded-lg';
feedback.innerHTML = '<i class="fas fa-exclamation-circle mr-2"></i> Please write a sentence first.';
feedback.style.display = 'block';
return;
}
// Simple check - does the sentence contain the verb?
if (sentence.toLowerCase().includes(verb.toLowerCase())) {
feedback.className = 'bg-green-100 text-green-800 mt-4 p-3 rounded-lg';
feedback.innerHTML = `<i class="fas fa-check-circle mr-2"></i> Great job! You used "${verb}" correctly in your sentence.`;
} else {
feedback.className = 'bg-yellow-100 text-yellow-800 mt-4 p-3 rounded-lg';
feedback.innerHTML = `<i class="fas fa-info-circle mr-2"></i> Your sentence doesn't seem to use "${verb}". Try again!`;
}
feedback.style.display = 'block';
}
function newVerb() {
setupVerb();
}
// Initialize practice exercises
window.onload = function() {
// Chart.js
const ctx = document.getElementById('progressChart').getContext('2d');
const progressChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Verb Identification', 'Sentence Creation', 'Participation', 'Homework'],
datasets: [{
label: 'Class Average (%)',
data: [92, 85, 95, 88],
backgroundColor: [
'rgba(99, 102, 241, 0.7)',
'rgba(139, 92, 246, 0.7)',
'rgba(236, 72, 153, 0.7)',
'rgba(20, 184, 166, 0.7)'
],
borderColor: [
'rgba(99, 102, 241, 1)',
'rgba(139, 92, 246, 1)',
'rgba(236, 72, 153, 1)',
'rgba(20, 184, 166, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true
}
},
scales: {
y: {
beginAtZero: true,
max: 100,
ticks: {
callback: function(value) {
return value + '%';
}
}
}
}
}
});
// Setup practice exercises
setupSentence();
setupVerb();
};
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=aryansrk/aryan-trail" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>