Interactive IPAS E-Learning

A responsive browser-based learning application for Grade 4 students covering Earth and the Universe (Bumi dan Alam Semesta). The project combines interactive lesson slides with classroom discussion activities designed to encourage participation, independent thinking, and confidence in expressing ideas.

Live Demo

After GitHub Pages is enabled, the application will be available at:

https://sulthanrhnn.github.io/interactive-ipas-elearning/

Project Purpose

This project was developed as an educational learning medium for Grade 4 IPAS lessons at SDIT Tahfizh Al Fatih. It presents curriculum-aligned material in a child-friendly format and provides a structured discussion workflow where student answers can be displayed anonymously.

Main Features

• Four interactive learning chapters
• Slide-based lesson navigation with progress indicators
• Responsive layout for desktop, tablet, and mobile browsers
• Random discussion question selection for each chapter
• Student name and answer input form
• Multiple answer collection during a classroom session
• Anonymous answer presentation in randomized order
• Restartable classroom discussion flow
• No server, database, framework, or installation required
• Works locally after the files are downloaded

Learning Chapters

1. Earth as a Place for Life
2. Landforms and Earth's Surface Features
3. Earth's Rotation and Revolution
4. The Moon as Earth's Natural Satellite

Application Screenshots

Chapter Selection

Interactive Lesson Slide

Classroom Discussion Form

Anonymous Discussion Results

Technology Stack

• HTML5
• CSS3
• Vanilla JavaScript
• Responsive CSS media queries
• Browser DOM APIs

The project intentionally avoids external frameworks and dependencies so it can run in a browser without a build process.

How the Discussion Flow Works

1. The teacher or student selects a chapter.
2. Students review the material through interactive slides.
3. The application randomly selects a discussion question for the chapter.
4. Students submit their names and answers one at a time.
5. The application stores answers temporarily in browser memory.
6. Answers are shuffled and displayed individually without student names.
7. The teacher discusses each anonymous answer with the class.

Privacy and Data Handling

• Student names are collected only to support the classroom input process.
• Names are not displayed on the discussion result page.
• Answers and names are stored only in JavaScript memory during the current browser session.
• No information is transmitted to a server or saved to a database.
• Refreshing or closing the page clears the submitted data.

Run Locally

No installation is required.

1. Download or clone this repository.
2. Open the project folder.
3. Double-click index.html.

Alternatively, use a simple local development server:

python -m http.server 8000

Then open:

http://localhost:8000

Project Structure

interactive-ipas-elearning/
├── docs/
│   └── screenshots/
│       ├── anonymous-results.png
│       ├── chapter-list.png
│       ├── discussion-form.png
│       ├── lesson-slide.png
│       └── welcome-page.png
├── index.html
├── script.js
├── styles.css
├── .gitignore
├── .nojekyll
├── LICENSE
└── README.md

Deployment with GitHub Pages

1. Open the repository Settings.
2. Select Pages.
3. Under Build and deployment, choose Deploy from a branch.
4. Select the main branch and / (root) folder.
5. Save and wait for deployment to complete.

Current Limitations

• Submitted answers are not retained after a refresh.
• The application does not support multiple devices contributing to one shared session.
• There is no teacher authentication or cloud database.
• The learning content is currently limited to Grade 4 Earth and universe material.

These limitations are intentional for the current static prototype and keep the application simple to deploy and use in a classroom browser.

Author

M. Sultan Raihan Attalla
Information Systems — Universitas Muhammadiyah Riau

License

This project is licensed under the MIT License.