SADAN ADEA MODEL SECONDARY SCHOOL/2018E.
JAVA SCRIPT LAB -ACTIVITY {
Example of JavaScriptina <script> Tag [Link](n+"-it is odd NUMBER");
}
<!DOCTYPEhtml>
<html> </script></body></html>
<head>
</head> LAB ACTIVITY= 2
<body> <!DOCTYPE html>
<h1>JavaScript Tutorials</h1>
<html>
<script>
<head>
//write JavaScript code here. alert('Hello,
how are you?') <title> Studet Attendance Sheet</title>
</script>
<style>
</body>
</html> {
font-family:Arial, sans-serif;
body {
LAB ACTIVITY= 1
background-color: #f7f9fb;
<!Doctypehtml>
margin: 0;
<html>
padding: 0;
<head>
}
<title>identify odd and even number</title></head>
h1{
<body>
background-color: #2c7be5;
<script type="text/javascript">
color:white;
var n=prompt("insert number"," ");
text-align:center;
if(n==0)
padding:15px;
{
}
[Link](n+"-it is zero NUMBER");
table{
}
width:80%;
else if(n%2==0)
margin:30px auto;
{
border-collapse:collapse;
[Link](n+"-it is even NUMBER");
box-shadow:02px5px
}
rgba(0,0,0,0.1);
else
JavaScript lab activity Page 1
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
} .checkmark::after {
th,td{ content: "+";
border:1px solid #ccc; position: absolute;
padding: 12px; top: -2px;
text-align: center; left: 4px;
} font-size: 20px;
th{ color: green;
background-color: #2c7be5; }*/
color: white; footer{
} text-align:center;
td{ margin-top:20px;
background-color: #ffffff; padding:10px;
} color:#333;
td:hover{ }
background-color: #d0e4ff; </style>
} </head>
input[type='checkbox']{ <body>
width: 20px; <h1>StudentAttendanceSheet</h1>
height: 20px; <table>
cursor: pointer; <tr>
} <th>RollNo.</th>
/*.checkmark::after { <th>StudentName</th>
display: inline-bolck; <th>Present</th>
Width: 25px: <th>Absent</th>
height: 25px; </tr>
border: 2px solid #2c7be5; <tr>
border_radius: 4px; <td>1</td>
cursor: pointer; <td>AliAhmed</td>
position: relative; <td
onclick="[Link]('input[type=checkbox]').cl
} ick;"><input type="checkbox"></td>
input[type="checkbox"]:checked
JavaScript lab activity Page 2
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
<td <td
onclick="[Link]('input[type=checkbox]').cl onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> ick;"><input type="checkbox"></td>
</tr> <td
onclick="[Link]('input[type=checkbox]').cl
<tr> ick;"><input type="checkbox"></td>
<td>2</td> </tr>
<td>BetelKidane</td> </table>
<td <footer>
onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> <p> Internal CSS Student project </p>
<td </footer>
onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> </body>
</tr> </html>
<tr> LAB ACTIVITY=3
<td>3</td> <! DOCTYPE html>
<td>Daniel tesfaye</td> <html lang="en">
<td <head>
onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> <meta charset="UTF-8" />
<td <meta name="viewport" content="width=device-
onclick="[Link]('input[type=checkbox]').cl width, initial-scale=1.0"/>
ick;"><input type="checkbox"></td> <title>My Hobbies</title>
</tr> <style>
<tr> :root {
<td>4</td> --bg: #ffffff;
<td>Selamawit bekele</td> --text: #222;
<td --accent: #4f46e5;
onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> }
<td [data-theme="dark"] {
onclick="[Link]('input[type=checkbox]').cl
ick;"><input type="checkbox"></td> --bg: #121212;
</tr> --text: #f1f1f1;
<tr> --accent: #818cf8;
<td>5</td> }
<td>Samuel Desta</td> body {
margin: 0;
JavaScript lab activity Page 3
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
font-family: sans-serif; margin-top: 1rem;
background: var(--bg); text-align: center;
color: var(--text); }
} button {
header { padding: 0.5rem 1rem;
background: var(--accent); background: var(--accent);
color: white; border: none;
padding: 1rem; color: white;
text-align: center; border-radius: 5px;
} cursor: pointer;
nav { }
background: #e5e7eb; button:hover {
padding: 0.5rem; opacity: 0.9;
display: flex; }
justify-content: center; </style>
gap: 1.5rem; </head>
} <body>
nav a { <header>
text-decoration: none; <h1>My Hobbies</h1>
color: var(--text); </header>
font-weight: bold; <nav>
} <a href="#reading">Reading</a>
nav a:hover { <a href="#gaming">Gaming</a>
color: var(--accent); <a href="#traveling">Traveling</a>
} </nav>
section { <section id="reading">
padding: 2rem; <h2>📚 Reading</h2>
max-width: 700px; <p>I love reading fiction and personal development
books. My favorite author is Brandon Sanderson.</p>
margin: auto;
</section>
}
<section id="gaming">
.toggle-btn {
<h2>🎮 Gaming</h2>
JavaScript lab activity Page 4
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
<p>I enjoy playing strategy and role-playing games. <p>Sometimes the journey is more important than
Some of my top picks are Zelda and Stardew the destination.</p>
Valley.</p>
</details>
</section>
<details>
<section id="traveling">
<summary> A Skill You Gained</summary>
<h2>✈️Traveling</h2>
<p>You learned how to prepare, how to stay calm,
<p>Exploring new cultures and foods is exciting! I and how to trust yourself.</p>
hope to visit Japan and Italy someday.</p>
</details>
</section>
<details>
<div class="toggle-btn">
<summary> A Surprise You Found</summary>
<button onclick="toggleTheme()">Toggle Dark
Mode</button> <p>You found a secret waterfall, met a wise guide, or
discovered your own strength.</p>
</div>
</details>
<script>
<details>
function toggleTheme() {
<summary> Words from the Journey</summary>
const html = [Link];
<p>“The world is wide, and you are brave. Keep
[Link]('data-theme'); exploring.”</p>
} </details>
</script> <details>
</body> <summary>🎉 What’s Next?</summary>
</html> <p>Pack again, choose a new path, and explore even
more. Your journey never ends!</p>
LAB ACTIVITY=4
</details>
<! DOCTYPE html>
<details>
<html>
<summary> A Skill You Gained</summary>
<head>
<p>You learned how to survive with what you have!
<title> Discoveries</title> </p>
</head> </details>
<body style="font-family: Arial; background: #f3e5f5; <details>
text-align: center; padding: 20px;">
<summary>A Surprise You Found</summary>
<h1> What You Discover</h1>
<p>A hidden treasure? A new friend? The world is
<p>Every journey teaches you something. Click to full of surprises!</p>
reveal!</p>
</details>
<details>
<br>
<summary> A Lesson You Learned</summary>
JavaScript lab activity Page 5
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
<a href="[Link]">⬅️Back</a> | <marquee><p>Made by Samson • HTML Only —
Interactive & Fun 🌟</p></marquee>
<a href="[Link]"> Start Over</a>
</footer>
<hr>
</body>
<h2>✍️Register for Your Next Adventure!</h2>
</html>
<p>Fill in your details to start planning your next
journey.</p> LAB ACTIVITY=5
<form onsubmit="alert('Thanks for registering! Get <!DOCTYPE html>
ready to explore '); return false;" style="max-width:
400px; margin: auto; background: #fff; padding: <html lang="en">
20px; border-radius: 10px;">
<head>
<fieldset style="border: none;">
<meta charset="UTF-8" />
<label for="name"> Full Name:</label><br>
<title>Quiz with Timer</title>
<input type="text" id="name" name="name"
<style>
required style="width: 100%; padding:
6px;"><br><br> body {
<label for="email">📧 Email Address:</label><br> font-family: Arial, sans-serif;
<input type="email" id="email" name="email" background: #f4f4f4;
required style="width: 100%; padding:
6px;"><br><br> text-align: center;
<label for="place">Choose padding: 50px;
Destination:</label><br>
}
<select id="place" name="place" required
style="width: 100%; padding: 6px;"> .quiz-box {
<option value="">--Select One--</option> background: white;
<option value="forest"> Forest</option> padding: 30px;
<option value="desert"> Desert</option> max-width: 500px;
<option value="ocean"> Ocean</option> margin: auto;
<option value="mountains"> Mountains</option> border-radius: 10px;
<option value="city">🏙 City</option> box-shadow: 0 0 10px rgba(0,0,0,0.2);
</select><br><br> position: relative;
<input type="submit" value="Register" }
style="padding: 8px 16px; background-color:
#4CAF50; color: white; border: none; cursor: button {
pointer;">
display: block;
</fieldset>
width: 100%;
</form>
margin: 10px 0;
<footer style="margin-top: 40px; color: #777;">
padding: 10px;
JavaScript lab activity Page 6
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
font-size: 16px; list-style: none;
border: none; padding: 0;
border-radius: 5px; }
background: #007BFF; #finalResult li {
color: white; margin-bottom: 10px;
cursor: pointer; border-bottom: 1px solid #ddd;
} padding-bottom: 10px;
button:hover { }
background: #0056b3; .correct {
} color: green;
#timer { font-weight: bold;
font-size: 20px; }
font-weight: bold; .wrong {
position: absolute; color: red;
top: 15px; font-weight: bold;
right: 20px; }
color: #333; </style>
} </head>
#finalResult { <body>
max-width: 600px;
margin: auto; <div class="quiz-box" id="quizArea">
background: white; <div id="timer">Time left: 10s</div>
padding: 30px; <h2 id="question"></h2>
border-radius: 10px; <button id="btn0"
onclick="selectAnswer('A')"></button>
box-shadow: 0 0 10px rgba(0,0,0,0.2);
<button id="btn1"
text-align: left; onclick="selectAnswer('B')"></button>
} <button id="btn2"
onclick="selectAnswer('C')"></button>
#finalResult h2 {
<button id="btn3"
text-align: center; onclick="selectAnswer('D')"></button>
} </div>
#finalResult ul { <div id="finalResult" style="display:none;">
JavaScript lab activity Page 7
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
<h2>Quiz Completed!</h2> correct: "C"
<p id="scoreSummary"></p> }
<ul id="detailedResults"></ul> ];
</div> <script> let currentQuestion = 0;
const questions = [ let score = 0;
{ let timer;
question: "What is the capital of Ethiopia?", let timeLeft = 10;
answers: ["Nairobi", "Addis Ababa", // Для хранения ответов пользователя для
"Khartoum", "Kampala"], финального отчёта
correct: "B" // Формат: { question, selectedAnswer,
correctAnswer }
},
const userAnswers = [];
{
function loadQuestion() {
question: "What is the highest mountain in the
world?", clearInterval(timer);
answers: ["K2", "Mount Everest", timeLeft = 10;
"Kangchenjunga", "Lhotse"],
updateTimerDisplay();
correct: "B"
const q = questions[currentQuestion];
},
{ [Link]("question").textContent =
[Link];
question: "What is the largest country in the
world by area?", [Link]("btn0").textContent =
"A) " + [Link][0];
answers: ["Canada", "United States", "Russia",
"China"], [Link]("btn1").textContent =
"B) " + [Link][1];
correct: "C"
[Link]("btn2").textContent =
}, "C) " + [Link][2];
{ question: "Which planet is known as the 'Red [Link]("btn3").textContent = "D)
Planet'?", " + [Link][3];
answers: ["Venus", "Mars", "Jupiter", timer = setInterval(() => {
"Saturn"],
timeLeft--;
correct: "B"
updateTimerDisplay();
},
if (timeLeft <= 0) {
{
clearInterval(timer);
question: "What is the chemical symbol for
gold?", recordAnswer(null);
answers: ["Ag", "Fe", "Au", "Cu"], nextQuestion();
JavaScript lab activity Page 8
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
}
[Link]("quizArea").[Link] =
}, 1000); "none";
} const finalDiv =
[Link]("finalResult");
function updateTimerDisplay() {
[Link] = "block";
[Link]("timer").textContent = [Link]("scoreSummary").textCon
`Time left: ${timeLeft}s`; tent = `Your score: ${score} out of $
} {[Link]}`;
function selectAnswer(answer) { const list =
[Link]("detailedResults");
clearInterval(timer);
[Link] = "";
recordAnswer(answer);
[Link]((ans, idx) => {
nextQuestion();
const li = [Link]("li");
}
const selectedText = [Link] ?
function recordAnswer(selected) { [Link][letterToIndex([Link])] : "No
answer";
const correct = questions[currentQuestion].correct;
const correctText =
if (selected === correct) { [Link][letterToIndex([Link])];
score++; } const isCorrect = [Link] ===
[Link];
[Link]({
[Link] = `
question: questions[currentQuestion].question,
<strong>Q${idx + 1}:</strong> ${[Link]}
selectedAnswer: selected, <br>
correctAnswer: correct, Your answer: <span class="${isCorrect ?
'correct' : 'wrong'}">${selectedText}</span><br>
answers: questions[currentQuestion].answers
Correct answer:
});
<strong>${correctText}</strong>
}
`;
function nextQuestion() {
[Link](li);
currentQuestion++;
});
if (currentQuestion < [Link]) {
}
loadQuestion();
function letterToIndex(letter) {
} else {
return {A:0, B:1, C:2, D:3}[letter];
showFinalResult();
} loadQuestion();
} }
</script>
function showFinalResult() {
</body>
JavaScript lab activity Page 9
SADAN ADEA MODEL SECONDARY SCHOOL/2018E.C
</html>
JavaScript lab activity Page 10