Project: RescueTails (In Progress) - Interactive eLearning Game

Best experienced by clicking through the full interaction flow - Try Now

Prototype note: This build is currently optimized for standard laptop screen heights during development. If the bottom navigation is not visible, reduce browser zoom slightly or resize the window to view the full interaction.

Client: Personal Portfolio Project
Audience: Ages 8–13
Role: eLearning Architect & Designer
Tools: Adobe Captivate, JavaScript, HTML, CSS, Adobe Photoshop, Chat GPT (AI-Assisted Development)

Overview:

RescueTails is a gamified eLearning module that teaches empathy, teamwork, and problem-solving through animal rescue missions. Players act as young rescuers making quick, thoughtful choices to help animals in need , and earning points for safe and kind decisions.

Currently in development, this project demonstrates advanced interaction design, branching logic, custom JavaScript logic, HTML/CSS layout control, and UI design for a fully interactive experience.

Production & Purpose:

Developed as a personal portfolio project to showcase full-cycle eLearning development — from story writing to functional prototyping.

  • Story Development: 1 week

  • Initial Build Phase: 5½–6 weeks (logic, interactivity, and testing)

  • Status: Framework only — screenshots highlight core functionality in progress

  • Currently in progress.

AI Collaboration:

AI-assisted tools like ChatGPT supported rapid prototyping, documentation, and code validation, ensuring cleaner, more consistent builds. Every feature was planned, coded, and tested manually, with AI serving only as a workflow enhancer.

Human-centered eLearning design powered by smart tools.

Behind the Build

The RescueTails framework is powered by custom JavaScript that connects Captivate variables with real-time interactivity and adaptive scoring. This approach reduces trigger complexity while enabling scalable, reusable interaction logic across slides.

One example comes from the Summary (Final 1) slide, which detects review mode, calculates averages across activities, and dynamically updates interface elements based on learner performance:

  • (function () {

    var isReview = false;

    try { isReview = Number(cpAPIInterface.getVariableValue('ReviewMode')) === 1; } catch(_) {}

    if (isReview) {

    setTimeout(function () {

    cpAPIInterface.navigateToNextSlide?.();

    }, 20);

    return;

    }

    var chat = Number(cpAPIInterface.getVariableValue('ChatScore')) || 0;

    var info = Number(cpAPIInterface.getVariableValue('InfoHubPercent')) || 0;

    var act = Number(cpAPIInterface.getVariableValue('ActivityPercent')) || 0;

    var totalPercent = Math.round((chat + info + act) / 3);

    cpAPIInterface.setVariableValue('TotalPercent', totalPercent);

    var passed = totalPercent >= 70;

    if (passed) { cp.show('btn_continue_2'); cp.hide('btn_retry'); }

    else { cp.show('btn_retry'); cp.hide('btn_continue_2'); }

    })();

All Modules displayed on the VRArt Studios website are the property of their respective owners. All products, contents, images, brands, etc are registered trademarks, copyrights, etc. Any unauthorized use of products, contents, images, brands, etc belonging to the respective owners violates trademark and copyright laws and will be pursued in a court of law.

HOME
BACK