|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Study Helper | Exam Question Generator</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary-color: #4361ee; |
|
|
--secondary-color: #3f37c9; |
|
|
--accent-color: #4895ef; |
|
|
--light-color: #f8f9fa; |
|
|
--dark-color: #212529; |
|
|
--success-color: #4cc9f0; |
|
|
--warning-color: #f72585; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #f5f7fa; |
|
|
color: var(--dark-color); |
|
|
line-height: 1.6; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
header { |
|
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); |
|
|
color: white; |
|
|
padding: 1.5rem 0; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.container { |
|
|
width: 90%; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.header-content { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
font-size: 1.8rem; |
|
|
font-weight: 700; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
color: var(--accent-color); |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
display: flex; |
|
|
list-style: none; |
|
|
gap: 1.5rem; |
|
|
} |
|
|
|
|
|
nav a { |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
font-weight: 500; |
|
|
transition: all 0.3s ease; |
|
|
padding: 0.5rem 1rem; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
nav a:hover { |
|
|
background-color: rgba(255, 255, 255, 0.2); |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
color: white; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
main { |
|
|
flex: 1; |
|
|
padding: 2rem 0; |
|
|
} |
|
|
|
|
|
.hero { |
|
|
text-align: center; |
|
|
margin-bottom: 3rem; |
|
|
} |
|
|
|
|
|
.hero h1 { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 1rem; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1.1rem; |
|
|
color: #6c757d; |
|
|
max-width: 700px; |
|
|
margin: 0 auto 2rem; |
|
|
} |
|
|
|
|
|
.search-box { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 2rem; |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
display: flex; |
|
|
gap: 0.5rem; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
input[type="text"] { |
|
|
flex: 1; |
|
|
padding: 1rem; |
|
|
border: 2px solid #e9ecef; |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
input[type="text"]:focus { |
|
|
outline: none; |
|
|
border-color: var(--accent-color); |
|
|
box-shadow: 0 0 0 3px rgba(72, 149, 239, 0.3); |
|
|
} |
|
|
|
|
|
button { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
border: none; |
|
|
padding: 1rem 1.5rem; |
|
|
border-radius: 8px; |
|
|
cursor: pointer; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
button:hover { |
|
|
background-color: var(--secondary-color); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
button:disabled { |
|
|
background-color: #adb5bd; |
|
|
cursor: not-allowed; |
|
|
transform: none; |
|
|
} |
|
|
|
|
|
.options { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.select-group { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
select { |
|
|
padding: 0.5rem; |
|
|
border-radius: 6px; |
|
|
border: 2px solid #e9ecef; |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.results { |
|
|
margin-top: 3rem; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.results h2 { |
|
|
margin-bottom: 1.5rem; |
|
|
color: var(--dark-color); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.question-card { |
|
|
background: white; |
|
|
border-radius: 10px; |
|
|
padding: 1.5rem; |
|
|
margin-bottom: 1.5rem; |
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
|
|
border-left: 4px solid var(--accent-color); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.question-card:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.question { |
|
|
font-weight: 600; |
|
|
margin-bottom: 1rem; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.answer { |
|
|
color: #495057; |
|
|
padding-left: 1rem; |
|
|
border-left: 2px solid #dee2e6; |
|
|
} |
|
|
|
|
|
.loading { |
|
|
display: none; |
|
|
text-align: center; |
|
|
margin: 2rem 0; |
|
|
} |
|
|
|
|
|
.spinner { |
|
|
border: 4px solid rgba(0, 0, 0, 0.1); |
|
|
border-radius: 50%; |
|
|
border-top: 4px solid var(--primary-color); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
animation: spin 1s linear infinite; |
|
|
margin: 0 auto 1rem; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
color: var(--warning-color); |
|
|
text-align: center; |
|
|
margin: 1rem 0; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
footer { |
|
|
background-color: var(--dark-color); |
|
|
color: white; |
|
|
padding: 2rem 0; |
|
|
margin-top: 3rem; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: space-between; |
|
|
gap: 2rem; |
|
|
} |
|
|
|
|
|
.footer-section { |
|
|
flex: 1; |
|
|
min-width: 200px; |
|
|
} |
|
|
|
|
|
.footer-section h3 { |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 1.2rem; |
|
|
position: relative; |
|
|
padding-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.footer-section h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
bottom: 0; |
|
|
width: 50px; |
|
|
height: 2px; |
|
|
background-color: var(--accent-color); |
|
|
} |
|
|
|
|
|
.footer-section p { |
|
|
margin-bottom: 1rem; |
|
|
color: #adb5bd; |
|
|
} |
|
|
|
|
|
.footer-links { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 0.8rem; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
color: #adb5bd; |
|
|
text-decoration: none; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
color: white; |
|
|
padding-left: 5px; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
|
|
|
.social-links a { |
|
|
color: white; |
|
|
background-color: #495057; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.social-links a:hover { |
|
|
background-color: var(--accent-color); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
text-align: center; |
|
|
padding-top: 2rem; |
|
|
margin-top: 2rem; |
|
|
border-top: 1px solid #495057; |
|
|
color: #adb5bd; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.header-content { |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
nav ul { |
|
|
flex-direction: column; |
|
|
gap: 0.5rem; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
button { |
|
|
width: 100%; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.options { |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.select-group { |
|
|
justify-content: space-between; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.hero h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.hero p { |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.search-box { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.footer-content { |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="container"> |
|
|
<div class="header-content"> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-brain"></i> |
|
|
<span>AI Study Helper</span> |
|
|
</div> |
|
|
<nav> |
|
|
<ul> |
|
|
<li><a href="#"><i class="fas fa-home"></i> Home</a></li> |
|
|
<li><a href="#"><i class="fas fa-book"></i> Subjects</a></li> |
|
|
<li><a href="#"><i class="fas fa-graduation-cap"></i> Exam Prep</a></li> |
|
|
<li><a href="#"><i class="fas fa-info-circle"></i> About</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<button class="mobile-menu-btn"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div class="container"> |
|
|
<section class="hero"> |
|
|
<h1>AI-Powered Exam Question Generator</h1> |
|
|
<p>Enter any topic or question below, and our AI will generate potential exam questions with detailed answers to help you prepare effectively.</p> |
|
|
</section> |
|
|
|
|
|
<section class="search-box"> |
|
|
<div class="input-group"> |
|
|
<input type="text" id="topicInput" placeholder="Enter a topic or question (e.g., 'Photosynthesis', 'Newton's Laws', 'World War II')"> |
|
|
<button id="generateBtn"> |
|
|
<i class="fas fa-magic"></i> Generate Questions |
|
|
</button> |
|
|
</div> |
|
|
<div class="options"> |
|
|
<div class="select-group"> |
|
|
<label for="difficulty">Difficulty:</label> |
|
|
<select id="difficulty"> |
|
|
<option value="easy">Easy</option> |
|
|
<option value="medium" selected>Medium</option> |
|
|
<option value="hard">Hard</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="select-group"> |
|
|
<label for="questionType">Type:</label> |
|
|
<select id="questionType"> |
|
|
<option value="mixed" selected>Mixed</option> |
|
|
<option value="multiple_choice">Multiple Choice</option> |
|
|
<option value="short_answer">Short Answer</option> |
|
|
<option value="essay">Essay</option> |
|
|
<option value="true_false">True/False</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="select-group"> |
|
|
<label for="questionCount">Count:</label> |
|
|
<select id="questionCount"> |
|
|
<option value="3">3</option> |
|
|
<option value="5" selected>5</option> |
|
|
<option value="10">10</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="error-message" id="errorMessage"></div> |
|
|
</section> |
|
|
|
|
|
<div class="loading" id="loadingIndicator"> |
|
|
<div class="spinner"></div> |
|
|
<p>Generating questions... This may take a moment.</p> |
|
|
</div> |
|
|
|
|
|
<section class="results" id="resultsSection"> |
|
|
<h2><i class="fas fa-list-ol"></i> Generated Questions</h2> |
|
|
<div id="questionsContainer"></div> |
|
|
</section> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<div class="container"> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-section"> |
|
|
<h3>About AI Study Helper</h3> |
|
|
<p>Our mission is to empower students with AI-driven tools to enhance their learning experience and exam preparation.</p> |
|
|
<div class="social-links"> |
|
|
<a href="#"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-section"> |
|
|
<h3>Quick Links</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#">Home</a></li> |
|
|
<li><a href="#">Popular Subjects</a></li> |
|
|
<li><a href="#">Exam Preparation</a></li> |
|
|
<li><a href="#">Study Tips</a></li> |
|
|
<li><a href="#">Contact Us</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-section"> |
|
|
<h3>Resources</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#">Blog</a></li> |
|
|
<li><a href="#">FAQ</a></li> |
|
|
<li><a href="#">Privacy Policy</a></li> |
|
|
<li><a href="#">Terms of Service</a></li> |
|
|
<li><a href="#">API Documentation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-section"> |
|
|
<h3>Newsletter</h3> |
|
|
<p>Subscribe to get updates on new features and study resources.</p> |
|
|
<div class="input-group"> |
|
|
<input type="email" placeholder="Your email"> |
|
|
<button><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 AI Study Helper. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const topicInput = document.getElementById('topicInput'); |
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const difficultySelect = document.getElementById('difficulty'); |
|
|
const questionTypeSelect = document.getElementById('questionType'); |
|
|
const questionCountSelect = document.getElementById('questionCount'); |
|
|
const loadingIndicator = document.getElementById('loadingIndicator'); |
|
|
const resultsSection = document.getElementById('resultsSection'); |
|
|
const questionsContainer = document.getElementById('questionsContainer'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
|
|
|
|
|
|
generateBtn.addEventListener('click', generateQuestions); |
|
|
topicInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
generateQuestions(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); |
|
|
const nav = document.querySelector('nav ul'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', function() { |
|
|
nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex'; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
if (window.innerWidth > 768) { |
|
|
nav.style.display = 'flex'; |
|
|
} else { |
|
|
nav.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (window.innerWidth <= 768) { |
|
|
nav.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
async function generateQuestions() { |
|
|
const topic = topicInput.value.trim(); |
|
|
const difficulty = difficultySelect.value; |
|
|
const questionType = questionTypeSelect.value; |
|
|
const questionCount = questionCountSelect.value; |
|
|
|
|
|
|
|
|
if (!topic) { |
|
|
showError('Please enter a topic or question'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
questionsContainer.innerHTML = ''; |
|
|
hideError(); |
|
|
resultsSection.style.display = 'none'; |
|
|
|
|
|
|
|
|
loadingIndicator.style.display = 'block'; |
|
|
generateBtn.disabled = true; |
|
|
|
|
|
try { |
|
|
|
|
|
const prompt = `Generate ${questionCount} ${difficulty}-level ${questionType} exam questions with answers about ${topic}. |
|
|
Format each question as "Question: [question text]" followed by "Answer: [answer text]". |
|
|
Make sure the questions are relevant and likely to appear in an exam.`; |
|
|
|
|
|
|
|
|
const response = await callHuggingFaceAPI(prompt); |
|
|
|
|
|
|
|
|
if (response && response.generated_text) { |
|
|
const questionsAndAnswers = parseQuestionsAndAnswers(response.generated_text); |
|
|
displayQuestions(questionsAndAnswers); |
|
|
} else { |
|
|
showError('Failed to generate questions. Please try again.'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Error:', error); |
|
|
showError('An error occurred. Please check your connection and try again.'); |
|
|
} finally { |
|
|
loadingIndicator.style.display = 'none'; |
|
|
generateBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function callHuggingFaceAPI(prompt) { |
|
|
|
|
|
const API_TOKEN = "YOUR_HUGGING_FACE_API_TOKEN"; |
|
|
const API_URL = "https://api-inference.huggingface.co/models/google/flan-t5-xxl"; |
|
|
|
|
|
try { |
|
|
const response = await fetch(API_URL, { |
|
|
method: "POST", |
|
|
headers: { |
|
|
"Authorization": `Bearer ${API_TOKEN}`, |
|
|
"Content-Type": "application/json" |
|
|
}, |
|
|
body: JSON.stringify({ inputs: prompt }) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`API request failed with status ${response.status}`); |
|
|
} |
|
|
|
|
|
return await response.json(); |
|
|
} catch (error) { |
|
|
console.error("API call error:", error); |
|
|
throw error; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function parseQuestionsAndAnswers(text) { |
|
|
const qaPairs = []; |
|
|
const lines = text.split('\n'); |
|
|
let currentQuestion = null; |
|
|
|
|
|
for (const line of lines) { |
|
|
if (line.startsWith('Question:')) { |
|
|
if (currentQuestion) { |
|
|
qaPairs.push(currentQuestion); |
|
|
} |
|
|
currentQuestion = { |
|
|
question: line.replace('Question:', '').trim(), |
|
|
answer: '' |
|
|
}; |
|
|
} else if (line.startsWith('Answer:')) { |
|
|
if (currentQuestion) { |
|
|
currentQuestion.answer = line.replace('Answer:', '').trim(); |
|
|
qaPairs.push(currentQuestion); |
|
|
currentQuestion = null; |
|
|
} |
|
|
} else if (currentQuestion && currentQuestion.answer === '') { |
|
|
|
|
|
currentQuestion.answer += line.trim() + '\n'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (currentQuestion) { |
|
|
qaPairs.push(currentQuestion); |
|
|
} |
|
|
|
|
|
return qaPairs; |
|
|
} |
|
|
|
|
|
|
|
|
function displayQuestions(qaPairs) { |
|
|
if (qaPairs.length === 0) { |
|
|
showError('No questions were generated. Please try a different topic or prompt.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
qaPairs.forEach((qa, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'question-card'; |
|
|
card.innerHTML = ` |
|
|
<div class="question">Q${index + 1}: ${qa.question}</div> |
|
|
<div class="answer">${qa.answer}</div> |
|
|
`; |
|
|
questionsContainer.appendChild(card); |
|
|
}); |
|
|
|
|
|
resultsSection.style.display = 'block'; |
|
|
} |
|
|
|
|
|
|
|
|
function showError(message) { |
|
|
errorMessage.textContent = message; |
|
|
errorMessage.style.display = 'block'; |
|
|
} |
|
|
|
|
|
function hideError() { |
|
|
errorMessage.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
