The progress bar is displayed at the bottom, which updates dynamically as the user completes lessons and exercises. The JavaScript code keeps track of the user's progress and updates the progress bar accordingly.
Feel free to customize the styling, add more lessons and exercises, and expand the functionality to suit your needs. Remember to include relevant content and interactions within each lesson/exercise based on your Hindi speaking course material.
<!DOCTYPE html>
<html>
<head>
<title>Hindi Speaking Course AI</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
text-align: center;
}
.lesson {
margin-bottom: 20px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
.exercise {
margin-top: 10px;
}
.exercise input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
.progress-bar {
margin-top: 20px;
height: 10px;
background-color: #e9e9e9;
border-radius: 5px;
}
.progress-bar-fill {
height: 100%;
background-color: #4caf50;
border-radius: 5px;
}
.button {
display: inline-block;
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
text-decoration: none;
border-radius: 3px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Hindi Speaking Course AI</h1>
<div class="lesson">
<h2>Lesson 1: Greetings</h2>
<p>नमस्ते (Namaste) - Hello</p>
<p>अलविदा (Alvida) - Goodbye</p>
</div>
<div class="lesson">
<h2>Lesson 2: Introductions</h2>
<p>मेरा नाम ______ है। (Mera naam ______ hai.) - My name is ______.</p>
<p>आपका नाम क्या है? (Aapka naam kya hai?) - What is your name?</p>
</div>
<div class="exercise">
<h3>Exercise 1: Fill in the Blanks</h3>
<p>Complete the following sentence: "मैं _____ से हूँ।" (Main _____ se hoon.)</p>
<input type="text" id="exercise1Input">
<button class="button" onclick="checkAnswer('भारत')">Check Answer</button>
</div>
<div class="exercise">
<h3>Exercise 2: Dialogue Practice</h3>
<p>Practice the following dialogue:</p>
<p>Person A: आपका नाम क्या है? (Aapka naam kya hai?)</p>
<p>Person B: मेरा नाम ______ है। (Mera naam ______ hai.)</p>
<input type="text" id="exercise2Input">
<button class="button" onclick="checkAnswer('राम')">Check Answer</button>
</div>
<div class="progress-bar">
<div class="progress-bar-fill" id="progressBarFill" style="width: 0%;"></div>
</div>
</div>
<script>
const progress = {
currentLesson: 0,
totalLessons: document.querySelectorAll('.lesson').length,
correctAnswers: 0,
};
function checkAnswer(answer) {
if (answer === 'भारत' || answer === 'राम') {
progress.correctAnswers++;
}
updateProgressBar();
}
function updateProgressBar() {
progress.currentLesson++;
const percentage = (progress.currentLesson / progress.totalLessons) * 100;
document.getElementById('progressBarFill').style.width = percentage + '%';
}
</script>
</body>
</html>
No comments:
Post a Comment