AI Question generator

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>AI Question Generator</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="styles.css">

    <script defer src="script.js"></script>

</head>

<body>

    <div class="container text-center">

        <h1 class="title">AI Question Generator</h1>

        <div class="card p-4 shadow">

            <input type="text" id="topicInput" class="form-control" placeholder="Enter topic (e.g., Space, Math, History)">

            <button class="btn btn-primary mt-3" onclick="generateQuestion()">Generate Question</button>

            <div id="loading" class="mt-3" style="display: none;">

                <div class="spinner-border text-primary" role="status"></div>

                <p>Generating...</p>

            </div>

            <div id="output" class="mt-3"></div>

        </div>

    </div>

</body>

</html>

body {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    font-family: 'Arial', sans-serif;
    padding: 20px;
}

.title {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 20px;
}

.card {
    max-width: 500px;
    margin: auto;
    background: white;
    border-radius: 10px;
    text-align: center;
}

#output {
    font-size: 1.2rem;
    color: #333;
    padding: 15px;
    background: #f0f8ff;
    border-radius: 5px;
    margin-top: 15px;
    display: none;
}async function generateQuestion() {
    let topic = document.getElementById('topicInput').value.trim();
    let output = document.getElementById('output');
    let loading = document.getElementById('loading');

    if (topic === "") {
        alert("Please enter a topic!");
        return;
    }

    output.style.display = "none";
    loading.style.display = "block";

    try {
        const response = await fetch("https://api.openai.com/v1/completions", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer YOUR_OPENAI_API_KEY`
            },
            body: JSON.stringify({
                model: "text-davinci-003",
                prompt: `Generate a thought-provoking question about ${topic}.`,
                max_tokens: 50
            })
        });

        const data = await response.json();
        let question = data.choices[0].text.trim();

        output.innerHTML = `<b>Question:</b> ${question} 
            <br><button class="btn btn-success mt-2" onclick="copyText('${question}')">Copy</button>`;
        output.style.display = "block";
    } catch (error) {
        output.innerHTML = "Error generating question. Try again!";
        output.style.display = "block";
    }

    loading.style.display = "none";
}

function copyText(text) {
    navigator.clipboard.writeText(text).then(() => alert("Copied to clipboard!"));
}


Contact Form