Scribd
Upload
5 views

Practical-5 Resource

Uploaded by

shubhangichandra3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Practical-5 Resource

Uploaded by

shubhangichandra3
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

PRACTICAL NO-5

OBJECTIVE: create a simple, responsive landing page for a "Subject Tutorial"


website. The page includes a navigation bar and a welcome message, providing users
with links to different sections of the tutorial.

INTRODUCTION:
1. @media (max-width: 600px):
o This is a CSS media query that applies styles only when the viewport width is
600 pixels or less. It is used to make the navigation bar (.navbar) responsive
by changing its layout to a column and centering the items.
2. flex-direction: column;:
o This CSS property is used within the media query to change the direction of
the flex container (.navbar) from row (default) to column. This makes the
navigation links stack vertically on smaller screens.
3. align-items: center;:
o This CSS property is also used within the media query to center-align the flex
items (navigation links) along the cross-axis (vertically in this case).
4. FormData : The Form Data object is used to easily retrieve and manipulate the form
data. It allows you to iterate over the form’s data entries.
5. Event.preventDefault: This method is used to prevent the default action of the form
submission which is to reload the page instead it allows custom javascript function to
handle the form data.

INPUT:
Index.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Subject Tutorial</title>
7. <style>
8. body {
9. font-family: Arial, sans-serif;
10. margin: 0;
11. padding: 0;
12. }
13. .navbar {
14. display: flex;
15. justify-content: space-around;
16. background-color: #333;
17. padding: 1rem;

September 27, 2024 1


PRACTICAL NO-5

18. }
19. .navbar a {
20. color: white;
21. text-decoration: none;
22. padding: 14px 20px;
23. }
24. .navbar a:hover {
25. background-color: #ddd;
26. color: black;
27. }
28. .content {
29. padding: 20px;
30. }
31. @media (max-width: 600px) {
32. .navbar {
33. flex-direction: column;
34. align-items: center;
35. }
36. }
37. </style>
38. </head>
39. <body>
40. <div class="navbar">
41. <a href="mcq.html">MCQ</a>
42. <a href="study.html">Study</a>
43. <a href="quiz.html">Quiz</a>
44. </div>
45. <div class="Landing Page">
46. <h1>Subject Tutorial</h1>
47. <p>Welcome to the subject tutorial. Here you can find MCQs, study material, and
quizzes to help you learn the subject.</p>
48. </div>
49. </body>
50. </html>
51.

mcq.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Web Development Basics Quiz</title>
7. <style>
8. body {
9. font-family: Arial, sans-serif;
10. margin: 20px;
11. }
12. .quiz-container {
13. max-width: 600px;
14. margin: auto;
15. padding: 20px;
16. border: 1px solid #ccc;
17. border-radius: 10px;
18. }
19. .question {
20. margin-bottom: 20px;
21. }
22. .question h3 {
23. margin-bottom: 10px;
24. }
25. .options label {
26. display: block;

September 27, 2024 2


PRACTICAL NO-5

27. margin-bottom: 5px;


28. }
29. .submit-btn {
30. display: block;
31. margin: auto;
32. padding: 10px 20px;
33. background-color: #4CAF50;
34. color: white;
35. border: none;
36. border-radius: 5px;
37. cursor: pointer;
38. }
39. </style>
40. </head>
41. <body>
42. <div class="quiz-container">
43. <h1>Web Development Basics Quiz</h1>
44. <form id="quizForm">
45. <div class="question">
46. <h3>1. What does HTML stand for?</h3>
47. <div class="options">
48. <label><input type="radio" name="q1" value="a"> Hyper Text Markup
Language</label>
49. <label><input type="radio" name="q1" value="b"> Home Tool Markup
Language</label>
50. <label><input type="radio" name="q1" value="c"> Hyperlinks and Text
Markup Language</label>
51. </div>
52. </div>
53. <div class="question">
54. <h3>2. What is the correct HTML element for inserting a line break?</h3>
55. <div class="options">
56. <label><input type="radio" name="q2" value="a"> <br></label>
57. <label><input type="radio" name="q2" value="b"> <break></label>
58. <label><input type="radio" name="q2" value="c"> <lb></label>
59. </div>
60. </div>
61. <div class="question">
62. <h3>3. Which CSS property is used to change the text color of an
element?</h3>
63. <div class="options">
64. <label><input type="radio" name="q3" value="a"> color</label>
65. <label><input type="radio" name="q3" value="b"> text-color</label>
66. <label><input type="radio" name="q3" value="c"> font-color</label>
67. </div>
68. </div>
69. <button type="submit" class="submit-btn">Submit</button>
70. </form>
71. </div>
72. <script>
73. document.getElementById('quizForm').addEventListener('submit', function(event) {
74. event.preventDefault();
75. const correctAnswers = {
76. q1: 'a',
77. q2: 'a',
78. q3: 'a'
79. }
80. let score = 0;
81. const form = event.target;
82. const formData = new FormData(form);
83. for (let [question, answer] of formData) {
84. if (correctAnswers[question] === answer) {
85. score++;
86. }
87. }
88. alert(`You scored ${score} out of ${Object.keys(correctAnswers).length}`);

September 27, 2024 3


PRACTICAL NO-5

89. });
90. </script>
91. </body>
92. </
93.
1. html>
2.

Quiz.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Web Development Basics Quiz</title>
7. <style>
8. body {
9. font-family: Arial, sans-serif;
10. margin: 20px;
11. }
12. .quiz-container {
13. max-width: 600px;
14. margin: auto;
15. padding: 20px;
16. border: 1px solid #ccc;
17. border-radius: 10px;
18. }
19. .question {
20. margin-bottom: 20px;
21. }
22. .question h3 {
23. margin-bottom: 10px;
24. }
25. .options label {
26. display: block;
27. margin-bottom: 5px;
28. }
29. .submit-btn {
30. display: block;
31. margin: auto;
32. padding: 10px 20px;
33. background-color: #4CAF50;
34. color: white;
35. border: none;
36. border-radius: 5px;
37. cursor: pointer;
38. }
39. </style>
40. </head>
41. <body>
42. <div class="quiz-container">
43. <h1>Web Development Basics Quiz</h1>
44. <form id="quizForm">
45. <div class="question">
46. <h3>1. What does HTML stand for?</h3>
47. <div class="options">
48. <label><input type="radio" name="q1" value="a"> Hyper Text Markup
Language</label>
49. <label><input type="radio" name="q1" value="b"> Home Tool Markup
Language</label>

September 27, 2024 4


PRACTICAL NO-5

50. <label><input type="radio" name="q1" value="c"> Hyperlinks and Text


Markup Language</label>
51. </div>
52. </div>
53. <div class="question">
54. <h3>2. What is the correct HTML element for inserting a line break?</h3>
55. <div class="options">
56. <label><input type="radio" name="q2" value="a"> <br></label>
57. <label><input type="radio" name="q2" value="b"> <break></label>
58. <label><input type="radio" name="q2" value="c"> <lb></label>
59. </div>
60. </div>
61. <div class="question">
62. <h3>3. Which CSS property is used to change the text color of an
element?</h3>
63. <div class="options">
64. <label><input type="radio" name="q3" value="a"> color</label>
65. <label><input type="radio" name="q3" value="b"> text-color</label>
66. <label><input type="radio" name="q3" value="c"> font-color</label>
67. </div>
68. </div>
69. <button type="submit" class="submit-btn">Submit</button>
70. </form>
71. </div>
72. <script>
73. document.getElementById('quizForm').addEventListener('submit', function(event) {
74. event.preventDefault();
75. const correctAnswers = {
76. q1: 'a',
77. q2: 'a',
78. q3: 'a'
79. }
80. let score = 0;
81. const form = event.target;
82. const formData = new FormData(form);
83. for (let [question, answer] of formData) {
84. if (correctAnswers[question] === answer) {
85. score++;
86. }
87. }
88. alert(`You scored ${score} out of ${Object.keys(correctAnswers).length}`);
89. });
90. </script>
91. </body>
92. </html>
93.

Study.html

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>Study Material</title>
7. <style>
8. body {
9. font-family: Arial, sans-serif;
10. background-color: #f4f4f4;
11. margin: 0;
12. padding: 0;
13. }

September 27, 2024 5


PRACTICAL NO-5

14. .container {
15. max-width: 800px;
16. margin: 50px auto;
17. padding: 20px;
18. background-color: #fff;
19. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20. border-radius: 8px;
21. }
22. h1 {
23. text-align: center;
24. color: #333;
25. }
26. .section {
27. margin-bottom: 30px;
28. }
29. .section h2 {
30. color: #555;
31. border-bottom: 2px solid #ddd;
32. padding-bottom: 10px;
33. }
34. .section ul {
35. list-style-type: none;
36. padding: 0;
37. }
38. .section ul li {
39. margin: 10px 0;
40. }
41. .section ul li a {
42. text-decoration: none;
43. color: #007BFF;
44. transition: color 0.3s;
45. }
46. .section ul li a:hover {
47. color: #0056b3;
48. }
49. </style>
50. </head>
51. <body>
52. <div class="container">
53. <h1>Study Material</h1>
54. <div class="section">
55. <h2>PDFs</h2>
56. <ul>
57. <li><a href="path/to/pdf1.pdf" target="_blank">PDF Study Material 1</a></li>
58. <li><a href="path/to/pdf2.pdf" target="_blank">PDF Study Material 2</a></li>
59. <li><a href="path/to/pdf3.pdf" target="_blank">PDF Study Material 3</a></li>
60. </ul>
61. </div>
62. <div class="section">
63. <h2>Videos</h2>
64. <ul>
65. <li><a href="https://www.youtube.com/watch?v=example1" target="_blank">Study
Video 1</a></li>
66. <li><a href="https://www.youtube.com/watch?v=example2" target="_blank">Study
Video 2</a></li>
67. <li><a href="https://www.youtube.com/watch?v=example3" target="_blank">Study
Video 3</a></li>
68. </ul>
69. </div>
70. </div>
71. </body>
72. </html>
73.

September 27, 2024 6


PRACTICAL NO-5

OUTPUT:

September 27, 2024 7


PRACTICAL NO-5

September 27, 2024 8

You might also like