Character vs Nature - Part 1

An Educational Game with CSP-Compliant Hosting for Secure Environments

🎮 Game Overview

Character vs Nature - Part 1 is an educational game developed in Construct 3 that brings storytelling and learning together. Designed for students, the game immerses players in a world where they explore character vs nature conflicts while learning critical thinking, empathy, and problem-solving.

https://vle.learning.moe.edu.sg/moe-library/module/view/7d77cace-3c63-4bec-9533-42e46606da68

Refused to create a worker from 'blob:https://html.learning.moe.edu.sg/aba6685b-eb78-45b7-86c2-39fad2ff893f' because it violates the following Content Security Policy directive: "child-src 'self'". Note that 'worker-src' was not explicitly set, so 'child-src' is used as a fallback.

CheckSupportsWorkerMode @ main.js:26Understand this error

appmanifest.json:1 Failed to load resource: the server responded with a status of 403 ()Understand this error

https://vle.learning.moe.edu.sg/community-gallery/module/view/4158df16-4962-4735-8b10-3aea5935a082/section/95889073/activity/95889075

Key Features

Interactive storytelling enhanced with voice narration
Character animations and dynamic visual effects
Engaging audio feedback and background music
Educational modules that explain conflict types and character growth
A progressive learning structure with scaffolded practice exercises

🚨 The Challenge: CSP Compliance

When we first deployed the game to secure platforms like SLS (Student Learning Space) or corporate environments, we encountered a significant issue: Content Security Policy (CSP) restrictions.

The Issues We Found

Blob Worker Creation
The original script used URL.createObjectURL(new Blob(...)), which is blocked in strict CSP environments.
Web Worker Dependencies
Construct 3’s worker mode—optimized for performance—relies on workers that CSP restrictions frequently disable.
Runtime Failures
The result? Blank screens, "Unexpected end of input" errors, and frustrated users.

🛠️ The Fix: CSP-Compliant Execution

To make the game compatible with strict security environments, we implemented these changes:

1. Disable Worker Mode

Modified the CheckSupportsWorkerMode function to always return false:

2. Force DOM Mode

The game now runs entirely in DOM mode, removing reliance on Web Workers but preserving all gameplay features.

3. Maintain Performance

Modern browsers are efficient enough that performance remains smooth, even without worker threads.

🔧 Technical Implementation

Key Files Updated

File	Description	Status
scripts/main.js	Removed CSP-violating worker code	✅ Fixed
scripts/sls-compatibility.js	Added compatibility layer for static hosting	✅ New
scripts/init-check.js	Override worker detection for extra safety	✅ New
index-sls.html	CSP-safe entry point for hosting	✅ New

Script Loading Order

To ensure compatibility, load the scripts in this exact order:

🚀 How to Run the Game

Local Development

Serve the game with a local server for testing:

Then open:

Production Deployment

The game now runs seamlessly on:

Static hosting platforms (GitHub Pages, Netlify, Vercel)
Educational LMS platforms with strict CSP rules
Corporate environments with locked-down browsers

Console Verification

When running correctly, you’ll see:

📁 Project Structure

├── index.html              # Main entry point
├── index-sls.html          # CSP-compliant entry
├── style.css               # Styles
├── data.json               # Game configuration
├── appmanifest.json        # PWA manifest
├── sw.js                   # Service worker
├── scripts/
│   ├── main.js             # CSP-fixed runtime
│   ├── sls-compatibility.js
│   ├── init-check.js
│   ├── c3main.js
│   ├── c3runtime.js
│   └── [other runtime files]
├── images/                 # Visual assets
├── media/                  # Audio files
├── icons/                  # App icons
└── README.md               # Documentation

🧠 Educational Value

This game isn’t just fun—it’s pedagogically grounded. Students learn:

Character Development: How characters evolve over time
Conflict Analysis: Understanding "Character vs Nature" dynamics
Story Structure: Breaking down beginnings, conflicts, and resolutions
Critical Thinking: Making decisions and seeing the consequences
Interactive Practice: Reinforcement through engaging exercises

🔒 Security Features

CSP-Compliant Execution
No Inline Scripts for enhanced security
Safe Resource Loading with no dynamic code generation
HTTPS Ready for modern hosting environments

🤝 Contributing

To contribute or troubleshoot:

Check browser console logs for CSP errors
Confirm scripts load in the correct order
Test across browsers and platforms
Document your fixes for community use

📞 Support

If you encounter issues:

Inspect browser console for error messages
Confirm proper server setup
Ensure all assets are accessible via HTTPS

This approach prioritizes compatibility and security while maintaining full gameplay functionality, making Character vs Nature - Part 1 accessible in a wide range of secure learning environments.

# Character vs Nature - Part 1

A Construct 3 educational game with CSP (Content Security Policy) compliance fixes for secure hosting environments.

## 🎮 Game Overview

**Character vs Nature - Part 1** is an interactive educational game built with Construct 3 that teaches about character development and conflict resolution through engaging storytelling and interactive elements.

### Features

- Interactive storytelling with voice narration

- Character animations and visual effects

- Audio feedback and background music

- Educational content about character vs nature conflicts

- Progressive learning structure with practice exercises

## 🚨 Problem Solved: CSP Compliance Issues

### The Original Problem

This Construct 3 game initially failed to run in environments with strict Content Security Policy (CSP) restrictions due to:

1. **Blob Worker Creation**: The `CheckSupportsWorkerMode` function created blob workers using `URL.createObjectURL(new Blob(...))` which violates CSP policies that restrict `blob:` URLs

2. **Web Worker Dependencies**: The game attempted to use Web Workers for performance optimization, but CSP policies often block worker creation

3. **Runtime Errors**: These violations caused the game to fail with "Unexpected end of input" errors and blank screens

### The Solution

We implemented a **CSP-compliant workaround** that:

1. **Disables Worker Mode**: Modified the `CheckSupportsWorkerMode` function to always return `false`

2. **Forces DOM Mode**: The game now runs entirely in DOM mode instead of using Web Workers

3. **Maintains Full Functionality**: All game features work identically, just with a different execution model

4. **Preserves Performance**: Modern browsers handle DOM-based execution efficiently

## 🔧 Technical Implementation

### Key Files Modified

#### `scripts/main.js`

- **Original**: 118,501 bytes with CSP-violating blob worker creation

- **Fixed**: Same size but with CSP-compliant `CheckSupportsWorkerMode` function

- **Change**: Replaced blob worker detection with simple `return false` statement

```javascript

// CSP-Compliant Version

async function CheckSupportsWorkerMode(){

console.log("[SLS Compatibilityhttp://localhost:8080/index.html

```

### Production Deployment

The game is now compatible with:

- **Static hosting services** (GitHub Pages, Netlify, Vercel)

- **CDN deployments** with strict CSP policies

- **Educational platforms** with security restrictions

- **Corporate environments** with locked-down browsers

### Verification

When running correctly, you should see these console messages:

```

[SLS Compatibility] SLS compatibility mode enabled - workers disabled

[SLS Compatibility] Worker mode disabled for CSP compliance

[SLS Compatibility] RuntimeInterface overridden

Made with Construct, the game and animation creation tool

[C3 runtime] Hosted in DOM, rendering with WebGL 2

```

## 📁 Project Structure

```

├── index.html # Main game entry point (CSP-compliant)

├── index-sls.html # Alternative SLS-compatible entry point

├── style.css # Game styling

├── data.json # Game data and configuration

├── appmanifest.json # PWA manifest

├── sw.js # Service worker

├── scripts/

│ ├── main.js # Main game runtime (CSP-fixed)

│ ├── sls-compatibility.js # CSP compatibility layer

│ ├── init-check.js # Worker detection override

│ ├── c3main.js # Construct 3 main runtime

│ ├── c3runtime.js # Construct 3 runtime engine

│ └── [other runtime files]

├── images/ # Game sprites and graphics

├── media/ # Audio files (VO, SFX, music)

├── icons/ # App icons and loading graphics

└── README.md # This documentation

```

## 🛠️ Troubleshooting

### Common Issues

1. **Black Screen on Load**

- Ensure you're serving via HTTP/HTTPS (not file://)

- Check browser console for CSP violations

- Verify all scripts are loading in correct order

2. **Audio Not Playing**

- Modern browsers require user interaction before audio

- Click anywhere on the game to enable audio

- Check browser audio permissions

3. **Performance Issues**

- DOM mode may be slightly slower than worker mode

- This is normal and acceptable for most use cases

- Consider enabling hardware acceleration in browser

### Browser Compatibility

- ✅ **Chrome/Chromium** 80+

- ✅ **Firefox** 75+

- ✅ **Safari** 13+

- ✅ **Edge** 80+

- ⚠️ **Internet Explorer** - Not supported (Construct 3 limitation)

## 📚 Educational Content

The game covers:

- **Character Development**: Understanding protagonist growth

- **Conflict Types**: Character vs Nature scenarios

- **Story Structure**: Beginning, middle, end progression

- **Critical Thinking**: Decision-making and consequences

- **Interactive Learning**: Hands-on practice exercises

## 🔒 Security Features

- **CSP Compliant**: Works with strict Content Security Policies

- **No Inline Scripts**: All JavaScript is in external files

- **Safe Resource Loading**: No dynamic code generation

- **HTTPS Ready**: Fully compatible with secure hosting

## 📄 License & Credits

- **Game Engine**: Construct 3 by Scirra Ltd.

- **Content**: Educational material by original authors

- **CSP Fixes**: Technical implementation for secure deployment

## 🤝 Contributing

If you encounter CSP-related issues or have improvements:

1. Check the browser console for specific CSP violations

2. Verify the compatibility scripts are loading correctly

3. Test in multiple browsers and hosting environments

4. Document any new compatibility requirements

## 📞 Support

For technical issues related to CSP compliance or deployment:

- Check browser developer tools console

- Verify server configuration allows required MIME types

- Ensure all game assets are accessible via HTTP/HTTPS

---

**Note**: This implementation prioritizes compatibility and security over maximum performance. The game runs identically to the original but uses DOM-based execution instead of Web Workers to ensure CSP compliance.

Breadcrumbs