<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Teaching Style Prediction</title> <style> /* Add some basic styling */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } h1 { text-align: center; background-color: #a00028; color: #fff; padding: 20px; } form { max-width: 500px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } label { display: block; margin-bottom: 5px; } input[type="number"], select { width: 95%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } button[type="button"] { background-color: #a00028; color: #fff; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; margin-left: 40%; } #prediction-result { margin-top: 20px; text-align: center; } </style> </head> <body> <h1>Teaching Style Prediction</h1> <form id="prediction-form"> <label for="input1">TEACHER'S AGE:</label> <input type="number" name="input1" id="input1" step="0.01"><br> <label for="input2">GENDER:</label> <select name="input2" id="input2"> <option value="0">Female</option> <option value="1">Male</option> </select><br> <label for="input3">TEACHING EXPERIENCE:</label> <input type="number" name="input3" id="input3" step="0.01"><br> <label for="input4">CHOICE OF TEACHING MATERIALS:</label> <select name="input4" id="input4"> <option value="0">ART SUPPLIES</option> <option value="1">GAMES</option> <option value="2">MUSIC AND MOVEMENT PROPS</option> <option value="3">VISUAL AIDS</option> <option value="4">WORK BOOKS</option> </select><br> <label for="input5">POSITIVE LEARNING ENVIRONMENT:</label> <select name="input5" id="input5"> <option value="0">Average</option> <option value="1">No</option> <option value="2">Yes</option> </select><br> <label for="input6">Does the teacher prefer individual or group-based teaching:</label> <select name="input6" id="input6"> <option value="0">GROUP</option> <option value="1">INDIVIDUAL</option> </select><br> <label for="input7">Does the teacher prefer when questions are raised by children:</label> <select name="input7" id="input7"> <option value="0">No</option> <option value="1">Yes</option> </select><br> <button type="button" id="predict-button">Predict</button> </form> <div id="prediction-result"> <h2>Predicted Teaching Style:</h2> <ul id="predicted-labels" style="font-size: 18px;"></ul> </div> <script> // JavaScript code to handle the prediction document.getElementById('predict-button').addEventListener('click', () => { const inputData = { input1: parseFloat(document.getElementById('input1').value), input2: parseFloat(document.getElementById('input2').value), input3: parseFloat(document.getElementById('input3').value), input4: parseFloat(document.getElementById('input4').value), input5: parseFloat(document.getElementById('input5').value), input6: parseFloat(document.getElementById('input6').value), input7: parseFloat(document.getElementById('input7').value), }; // Send a POST request to your Flask API fetch('/predict_teaching_style', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ input: Object.values(inputData) }), }) .then((response) => response.json()) .then((data) => { const predictedLabels = data.predicted_labels; const predictedLabelsElement = document.getElementById('predicted-labels'); predictedLabelsElement.textContent = predictedLabels.join(', '); }) .catch((error) => console.error('Error:', error)); }); </script> </body> </html>