Gamify Self-Learning Modules into a Progressive Web App

  • By Raul Comeros, Jr.
  • Last update: Jun 13, 2022
  • Comments: 7

Project Status Heroku Package Contributors


Logo

GoGamify Education

a gamification progressive web platform which converts a learning resource's rich-text data into HTML elements for gamified learning resources.

Deployed Website · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Roadmap
  5. Contributing
  6. Acknowledgments

About The Project

Project Banner

The core vision of the platform is to help teachers and students have an educational platform where they can easily integrate game-mechanics and fun in both teaching and learning. Applying the element of fun and games in this today’s digital age should be easy and seamless for users.

GoGamify can be used as a supplementary platform for existing software infrastructures like Learning Management Systems, Learning Portals, or Learning Libraries. Since the platform is designed to help provide solution to the needs, challenges, and use cases of teachers and students, the two progressive web applications were designed with features relevant to differing types of users.

(back to top)

Built With

Core

Others

(back to top)

Getting Started

Installation

  • Install NPM packages 
    npm install
  • Start development 
    npm run dev

(back to top)

Roadmap

v1.0

  • Landing Page

  • Features Page

  • Login/Register/Guest

    • Basic Route Protection & Authentication
    • Basic password encryption, session, and cookie handling

  • Admin/Teacher/Student Account Types

  • Gamify Resources & Collectibles

  • Join Journey

  • Earn Collectibles (Badges/Achievements/Themes)

  • Journey

  • Community

  • Module

  • Collections

  • Profile

Future

  • Quiz Generator (Class-based Response System)
  • OAuth implementation

(back to top)

Contributing

(back to top)

Core Dev Team

UI/UX (Prototype Phase)

Volunteer Contributors

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/amazing-feature)
  3. Commit your Changes (git commit -m 'Add some amazing-feature')
  4. Push to the Branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

(back to top)

Acknowledgments

(back to top)

Github

https://github.com/noice-noise/GoGamify-Students

Comments(7)

  • 1

    frontend changes: v1

    done: -fixed flexbox item responsiveness -changed 1 columned card to 2 -modified "show more" button icon -added "show less" button icon -relocated show less button when clicked -added card shadows

    still need to: -recolor "show more/less" text on hover -fix gap when additional info is shown -dynamic card creation -dynamic info -add more complete contents -fix show more button colors on hover

  • 2

    Journey_finals implementation

    working/fixed features:

    • todo and completed status in numbers
    • fixed elements responsiveness
    • added box shadows
    • empty journey templates
    • added date published
    • hidden view icon when complete
  • 3

    journey_partial implementation for finals

    working/fixed features: -current page number -progress meter -progress meter colors -progress meter border radius on 100% prog -progress meter transition -subject box colors -show more and less button -get show more and less info -redirect to current page on view button click -todo and completed btn hover effect -show todo and completed cards on click

    todo: -fix some element responsiveness

  • 4

    Magenerate na ang created achievements

    Img src is in my badge folders para matanaw kung ma generate ang image.

    The new unlockables are: The possibilities(achievement) Green(theme)

    Na display ra sila sa ilang proper section based on their unlockable type. Might start figma/researching images after approval of this pull request

  • 5

    journey test

    faulty

    • progress bar (not yet responsive)
    • current page (default page not set)
    • view button (needs to be polished)
    • more info (new frontend implementation)
  • 6

    Integrated the code for Badges

    The generate_achievements now support badges depending on the section parent's(param) id

    Also able to generate the element with an img, title, and description.

  • 7

    Journey:midterms

    done: -added more dummy cards and content (todo tasks) -added more dummy cards and content (completed tasks) -fixed show more button colors on hover -changed "BROWSE" to "EXPLORE" -added explore button -1 dynamic progress bar (for presentation) -changed title class to h1 -removed title, sub, school, update and version in "more info" -changed module box colors

    please edit code: line 155 -change href path for explore button (dunno where the path is, so redirected it to other page to check if it works);

    nice to have/ solve: -change fill color of browser svg on hover

Popular Tag

Related