Design and Implementation of an Interactive Branching Narrative System

The system is developed using HTML5 and native JavaScript, grounded in social support theory and empowerment theory, and constructs a ＂technology – service – emotion＂ three- imensional age-friendly framework. In content production, the work comprises script creation, character and scene design, and storyboard drawing, with AI tools (Doubao AI, Jimeng AI, Kling AI) employed to generate animation assets, which are then post-synthesized using Jianying Pro to produce three independent narrative video clips. In interaction implementation, leveraging the event-driven mechanism of HTML5 video playback, the system realizes a closed-loop interaction flow of ＂video playback completion → branch selection overlay pop- up → user selection → dynamic video source switching,＂ and integrates a localStorage data logging module to support export and analysis of operation logs.

System testing invited 10 participants to complete simulated medical registration tasks under two conditions: without age-friendly guidance (Path A) and with age-friendly guidance (Path B). Test results show that Path B significantly outperforms Path A across five dimensions — operational experience, support experience, safety assurance, emotional experience, and overall satisfaction—with improvements ranging from 2.3 to 3.3 points per dimension, and overall satisfaction rising from 1.8 to 4.7 (out of 5). Meanwhile, the average task completion time in Path B is reduced by approximately 58% compared to Path A (from 8.4 minutes to 3.5 minutes). These findings validate the effectiveness of the three-dimensional age-friendly framework, and demonstrate that the system, as a community education tool, can effectively convey age-friendly design principles and evoke empathy and understanding among users regarding the digital dilemmas faced by older adults.

Screenshot from video:

Choose to queue up for registration at the hospital

Choose to queue up for registration at the hospital

Volunteers help seniors sign up for hospital visits by phone.

Volunteers help seniors sign up for hospital visits by phone.

Volunteers help seniors sign up for hospital visits by phone.

Grandma Zhang learned online hospital registration.

Kling AI Video Asset Generation

CapCut Video Postprocessing

Branching Selection Interface Diagram

JavaScript Interactive Implementation

l State Variables and DOM Element References

const player = document.getElementById('player');

const vsrc = document.getElementById('vsrc');

const overlay = document.getElementById('chooseLayer');

const opt1 = document.getElementById('opt1'); // restart

const opt2 = document.getElementById('opt2'); // Queue for hospital registration

const opt3 = document.getElementById('opt3'); // Seek Help

let currentVideo = 1; // 当前播放视频编号

l Video End Event Listener and Button State Configuration

player.addEventListener('ended', () => {

overlay.classList.add('show'); // Show Selection Overlay

opt1.disabled = false; // Restart Button Always Enabled

if (currentVideo === 1) {

opt2.disabled = false;

opt3.disabled = false;

} else if (currentVideo === 2) {

opt2.disabled = true;

opt3.disabled = false;

} else if (currentVideo === 3) {

opt2.disabled = false;

opt3.disabled = true;

}

});

l Video Switching Function

function playVideo(num) {

currentVideo = num;

vsrc.src = `video${num}.mp4`;

player.load();

player.play().catch(e => console.log(e));

overlay.classList.remove('show');

}

l Button Click Binding

opt1.onclick = () => playVideo(1);

opt2.onclick = () => playVideo(2);

opt3.onclick = () => playVideo(3);

l Data Logging Module

const STORAGE_KEY = 'branch_logs';

function addLog(action, currentVideoBefore) {

const log = {

action: action,

timestamp: new Date().toISOString(),

currentVideo: currentVideoBefore

};

let logs = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');

logs.push(log);

localStorage.setItem(STORAGE_KEY, JSON.stringify(logs));

updateLogPreview();

}

function exportLogs() {

const logs = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');

const dataStr = JSON.stringify(logs, null, 2);

const blob = new Blob([dataStr], { type: 'application/json' });

//Download Logic

}