index.html

<!DOCTYPE html>
<html>
<head>
    <title>Student Performance Prediction</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<h2>Student Performance Prediction</h2>

<label>Hours Studied:</label>
<input type="number" id="Hours_Studied">

<label>Attendance (%):</label>
<input type="number" id="Attendance">

<label>Previous Score:</label>
<input type="number" id="Previous_Scores">

<label>Sleep Hours:</label>
<input type="number" id="Sleep_Hours">

<label>Motivation Level (0–Low, 1–Medium, 2–High):</label>
<input type="number" id="Motivation_Level">

<label>Internet Access (0–No, 1–Yes):</label>
<input type="number" id="Internet_Access">

<label>Gender (0–Female, 1–Male):</label>
<input type="number" id="Gender">

<button onclick="predict()">Predict Exam Score</button>

<p id="result"></p>
</div>

<script>
function predict() {
    document.getElementById("result").innerText = "Predicting...";

    fetch("http://127.0.0.1:5000/predict", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "Hours_Studied": Number(Hours_Studied.value),
            "Attendance": Number(Attendance.value),
            "Parental_Involvement": 2,
            "Access_to_Resources": 2,
            "Extracurricular_Activities": 1,
            "Sleep_Hours": Number(Sleep_Hours.value),
            "Previous_Scores": Number(Previous_Scores.value),
            "Motivation_Level": Number(Motivation_Level.value),
            "Internet_Access": Number(Internet_Access.value),
            "Tutoring_Sessions": 1,
            "Family_Income": 2,
            "Teacher_Quality": 2,
            "School_Type": 1,
            "Peer_Influence": 1,
            "Physical_Activity": 1,
            "Learning_Disabilities": 0,
            "Parental_Education_Level": 2,
            "Distance_from_Home": 5,
            "Gender": Number(Gender.value)
        })
    })
    .then(res => res.json())
    .then(data => {
        result.innerText = "Predicted Exam Score: " + data.predicted_score;
    });
}
</script>

</body>
</html>