NAME-Alok kumar Anand
ROLL. NO. 23/10/JC/045
Q.(1): Visit four website and list out the type of hypertext.
Ans:-
1. Wikipedia (https://en.wikipedia.org/):
Type of Hypertext: Associative hypertext.
Description: Wikipedia articles use embedded links to navigate to related articles, allowing
users to explore topics dynamically.
2. Amazon (https://www.amazon.com/):
Type of Hypertext: Node-based hypertext.
Description: Product pages include hyperlinks to categories, reviews, and related items,
enabling users to traverse the site's vast database.
3. BBC News (https://www.bbc.com/news):
Type of Hypertext: Linear and non-linear hypertext.
Description: Articles link to additional context, multimedia content, and related news,
guiding users to dive deeper into topics.
4. Coursera (https://www.coursera.org/):
Type of Hypertext: Interactive/tutorial hypertext.
Description: Online courses feature links to lessons, resources, and quizzes, creating an
educational web of interconnected content.
Q.(2) Designed a frontend webpage of above four given hypertext.
Ans-
Q.(3) Program for the frontend webpage(Q2.).
Ans:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hypertext Showcase</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<header class="bg-blue-600 text-white p-4">
<h1 class="text-center text-2xl">Explore Hypertext</h1>
</header>
<main class="max-w-4xl mx-auto p-6 bg-white shadow-lg rounded mt-6">
<section>
<h2 class="text-xl font-bold mb-4">1. Associative Hypertext</h2>
<p>
Learn about the interconnected nature of information. Click the link below to explore a topic:
</p>
<a
href="https://en.wikipedia.org/wiki/Hypertext"
class="text-blue-600 underline mt-2 inline-block"
target="_blank"
>
Wikipedia: Hypertext
</a>
</section>
<section class="mt-6">
<h2 class="text-xl font-bold mb-4">2. Node-Based Hypertext</h2>
<p>
Experience navigation like shopping sites. Click below to explore product categories:
</p>
<div class="flex space-x-4 mt-4">
<a
href="https://www.amazon.com/Electronics"
class="bg-blue-500 text-white py-2 px-4 rounded shadow"
target="_blank"
>
Electronics
</a>
<a
href="https://www.amazon.com/Books"
class="bg-blue-500 text-white py-2 px-4 rounded shadow"
target="_blank"
>
Books
</a>
</div>
</section>
<section class="mt-6">
<h2 class="text-xl font-bold mb-4">3. Linear and Non-Linear Hypertext</h2>
<p>
News websites offer related articles for deeper understanding. Check out the latest:
</p>
<a
href="https://www.bbc.com/news"
class="text-blue-600 underline mt-2 inline-block"
target="_blank"
>
BBC News
</a>
</section>
<section class="mt-6">
<h2 class="text-xl font-bold mb-4">4. Interactive Hypertext</h2>
<p>
Engage with educational materials that guide your learning. Explore the example below:
</p>
<a
href="https://www.coursera.org/"
class="text-blue-600 underline mt-2 inline-block"
target="_blank"
>
Coursera: Online Learning
</a>
</section>
</main>
<footer class="bg-gray-800 text-white text-center py-4 mt-6">
© 2024 Hypertext Showcase | All rights reserved.
</footer>
</body>
</html>
Q.(4) Project description.
Exam Master
Description:
Exam Master is a comprehensive MERN stack-based exam management platform that allows users to
take objective exams. It features user authentication, question navigation, answer tracking, and
submission functionality. The platform ensures a seamless experience for both users and
administrators, facilitating the management of exams, results, and performance analysis.
Features:
User authentication (Login/Signup)
Dynamic question rendering with one-question-at-a-time display
Navigation between questions
Saving and submitting answers
Real-time exam feedback through toast notifications
Protected routes for authorized access (dashboard, results, etc.)
Responsive UI built with Tailwind CSS
Tech Stack:
MongoDB, Express.js, React, Node.js (MERN)
Tailwind CSS for styling
React Router for navigation
react-toastify and react-hot-toast for notifications
This documentation covers the essential details and can be included in your project readme or
portfolio.
