ML Prediction Models Practice App

Single-page browser app for practicing machine learning prediction concepts in a practical, business-oriented format.

Overview

This project is a standalone educational app built as one index.html file using:

• Plain HTML
• Embedded CSS
• Vanilla JavaScript

There is no backend, no framework, and no build step. Open the file in a browser and use it directly.

What The App Includes

• A concise Theory section for beginner-friendly ML concepts
• A Model Reference section with common prediction models and business use cases
• A Practice Challenges section with 6 guided ML scenarios
• Interactive answer checking with feedback and explanations
• Simple visual interpretation panels such as confusion matrix mockups, regression metrics, and feature importance bars

Challenge Topics

The current version includes realistic business scenarios such as:

• Customer churn prediction
• Product demand prediction
• House price prediction
• Lead conversion prediction
• Employee attrition prediction
• Delivery delay prediction

Project Structure

• index.html - complete app with embedded UI, data, and logic
• AGENTS.md - project instruction file
• README.md - project overview and build prompt

Prompt Used

The initial app page was generated from the following prompt:

Build a single-page ML prediction models practice app as one HTML file called index.html.

Use plain HTML, CSS, and vanilla JavaScript only.
Do not use React, Node, or any framework.
Everything should run directly in the browser with no backend.

The app should help users practice and understand machine learning prediction concepts in a simple, business-oriented way.

Include 3 main sections inside the same page:
- Theory
- Model Reference
- Practice Challenges

Create a concise theory section that explains:
- what machine learning is
- what a prediction model is
- regression vs classification
- target variable
- features
- training data vs test data
- overfitting vs underfitting
- model evaluation
- common metrics: Accuracy, Precision, Recall, F1, MAE, RMSE, R²

Keep theory short, practical, beginner-friendly, and visually easy to scan.

Create a model reference section with short cards for:
- Linear Regression
- Logistic Regression
- Decision Tree
- Random Forest
- KNN
- Naive Bayes

For each model include:
- what type of problem it fits
- what it is good for
- strengths
- limitations
- one example business use case

Create 6 ML practice challenges across three difficulty levels:
- 2 Beginner
- 2 Intermediate
- 2 Advanced

Each challenge should have:
- a title
- a difficulty level
- a short business scenario in plain English
- a small mock dataset preview
- a prediction goal
- 4 guided questions:
  1. Is this regression or classification?
  2. What is the target variable?
  3. Which feature(s) are relevant?
  4. Which model is most appropriate?

Each challenge should also include:
- a hint
- the correct answers stored in JavaScript
- a short explanation for each correct answer

Use realistic business scenarios such as:
- customer churn prediction
- product demand prediction
- house price prediction
- lead conversion prediction
- employee attrition prediction
- delivery delay prediction

UI requirements:
- single-page layout
- clean professional styling
- no frameworks
- modern SaaS-like educational interface
- light content panels
- optional darker panel for challenge area
- top navigation or tabs for Theory / Models / Practice
- practice area should show challenge info on the left and answer area on the right
- feedback area below with ✅/❌ results
- Previous / Next challenge buttons
- progress indicator like “Challenge 2 of 6”

Interaction requirements:
- user selects answers using dropdowns, radio buttons, checkboxes, or buttons
- Submit button checks the answers
- show ✅ if correct and ❌ if incorrect
- show explanation after submission
- allow moving between challenges
- optionally include a “Show Answer” button

Also include a small visual results area for ML interpretation examples, such as:
- confusion matrix mockup for classification challenges
- regression metrics card for regression challenges
- simple feature importance style bar chart using CSS or vanilla JS
- these can be static or simulated, no real ML backend required

Store all theory content, model cards, and challenge data inside JavaScript objects or arrays in the same HTML file.

The final app should feel like a practical learning product for aspiring data analysts and beginner data scientists.

Deliver:
- one complete index.html file
- embedded CSS and JavaScript
- polished UI
- working navigation
- working challenge validation
- realistic sample challenge content

Build Note

The initial index.html page was built with Codex Plus in approximately 10 minutes.

How To Run

1. Clone or download the repository.
2. Open index.html in any modern browser.