ABC Games is a HumHub module for adding games and interactive learning activities directly into a HumHub community. It is designed to support both simple built-in demo games and expandable external game packages that can be installed separately.

The module can be used by schools, learning communities, youth projects, family platforms, church groups, clubs, and local networks that want to offer playful interaction without sending users away from the platform. Games can support learning, concentration, creativity, problem-solving, memory training, quizzes, and community engagement.

—

ABC Games User Manual

Module: ABC Games
Recommended version: v26.05.24.5 or newer
Platform: HumHub 1.18+
Purpose: Manage, publish, and play small educational HTML5 games inside HumHub, globally or inside individual Spaces.

1. What ABC Games is

ABC Games is a HumHub module for educational browser games. It is designed for two groups of people:

1. Normal HumHub administrators and Space administrators who want to offer games to users, students, parents, churches, clubs, schools, NGOs, communities, or public directory visitors.

2. Creative non-programmers who want to use AI tools to create simple learning games and publish them safely inside HumHub without building a full app or learning a complete game engine.

ABC Games can show very simple games, such as memory cards, spelling games, number games, sorting games, or small quiz games. It can also show more advanced HTML5 games using JavaScript, SVG, CSS animations, Canvas, keyboard input, touch input, sound, levels, score systems, timers, and local progress.

The important idea is this:

A modern AI tool can create a small one-page HTML5 game. ABC Games gives HumHub a place where these games can be stored, organized, tested, approved, published, sorted, categorized, tagged, and shown globally or inside selected Spaces.

ABC Games is not meant to replace professional game engines like Unity, Godot, Unreal, or Phaser for large commercial games. It is meant to make small and useful learning games easy to create, easy to share, and easy to manage in a community platform.

2. Main features in plain language

ABC Games can do the following:

• Show a public game directory at /games.

• Show individual games at URLs like /games/angle-ninja.

• Import the starter games from resources/games.

• Keep the original starter games as a safe fallback.

• Let administrators create new games from the backend.

• Let administrators paste HTML, CSS, and JavaScript into separate fields.

• Let administrators categorize games.

• Let administrators add tags such as math, spelling, music, memory, or mobile-friendly.

• Let administrators publish, disable, or keep games as draft.

• Let administrators sort games by drag and drop.

• Let the global game directory show only selected games.

• Let each Space enable ABC Games separately.

• Let each Space choose which games should appear in that Space.

• Keep Space game menus hidden unless ABC Games is enabled in that Space.

• Avoid the old /p/games/... redirect loop by rendering legacy /p/games/... routes directly as compatibility routes.

• Disable PJAX on game links so games load as full pages and JavaScript graphics initialize more reliably.

3. Important URLs

The preferred public URLs are:

/games
/games/angle-ninja
/games/change-maker
/games/fraction-pizza

The admin area is:

/abcgames/admin

Inside a Space, the games page is opened through the Space menu after ABC Games is enabled for that Space.

Legacy compatibility routes may still exist:

/p/games
/p/games/angle-ninja

These are not the preferred URLs. They are only there to prevent old links or old HumHub Pages redirects from breaking the site.

If /games/... still changes automatically to /p/games/..., check whether HumHub Custom Pages or another module still owns the games slug. In that case, remove or rename the old Custom Page entry.

4. Installation and first setup

Step 1: Upload the module

Upload the abcgames folder into:

protected/modules/abcgames

Step 2: Scan modules

Run:

php protected/yii module/scan

Step 3: Enable ABC Games

Go to:

Administration → Modules

Find ABC Games and enable it.

Step 4: Run migrations if needed

If HumHub does not run the migration automatically, run:

php protected/yii migrate/up --includeModuleMigrations=1

The migration creates the managed game tables:

abcgames_game
abcgames_category

If those tables are missing, ABC Games still works with bundled starter games, but create/edit/sort/category management will not be available until the migration is applied.

Step 5: Clear the cache

Run:

php protected/yii cache/flush-all

Step 6: Open the admin page

Open:

/abcgames/admin

Then click:

Import starter games

This imports the bundled files from resources/games into the managed game list.

5. The starter games

ABC Games comes with starter games in:

resources/games

Typical starter files are:

angle-ninja.html
change-maker.html
coordinate-plotter.html
fraction-pizza.html
logic-grid-mini.html
memory-pairs.html
number-guess-mentor.html
pattern-quest.html
prime-detective.html
shopkeeper.html
sorting-lab.html
spelling-fill.html
times-table-dash.html
unit-converter-race.html
word-builder.html

These starter games are important because they prove the module works even before custom games are created.

After clicking Import starter games, these files become database-managed entries. You can then edit title, description, category, tags, status, enabled state, and sort order.

Important: importing does not destroy the original files. The files remain in resources/games as a safe fallback.

6. Global game directory settings

Open:

/abcgames/admin

The global settings area allows you to configure the public game directory.

Enable global game directory

This controls whether the gamepad menu item appears in the top navigation.

When enabled, users can see the global game directory menu item.

When disabled, the top menu item is hidden. The routes may still be available for administrators or direct access, depending on permissions and setup.

Top menu sort order

This controls where the Games menu item appears in the HumHub top navigation.

A lower number usually appears earlier. A higher number usually appears later.

Example:

350
650
900

Use this when you want ABC Games to appear before or after other ABC Suite modules.

Enabled games in the global game directory

This checkbox list controls which games appear globally.

Example:

• Enable Angle Ninja globally.

• Enable Fraction Pizza globally.

• Disable Spelling Fill globally.

A game must be selected here and also be published/enabled in its own game record before normal users see it in the global directory.

7. Space-specific game settings

ABC Games can be enabled per Space.

This is important because not every Space should automatically show games.

Example:

• A school Space may show math and language games.

• A church youth Space may show teamwork and music games.

• A Montessori Space may show sorting, memory, sensorial, and practical-life style games.

• A business Space may show no games at all.

How to enable ABC Games in a Space

1. Open the Space.

2. Go to Space settings or Space administration.

3. Open the module management area.

4. Enable ABC Games.

5. After enabling it, click Configure.

6. Select the games that should appear in this Space.

7. Save.

The Space menu item appears only when ABC Games is enabled in that Space and at least one game is selected.

Why this matters

This keeps HumHub clean. Games do not suddenly appear in every Space. Each Space owner or Space admin can decide whether games belong in that Space.

8. Understanding game records

Each managed game has several fields.

Title

The human-readable name of the game.

Example:

Angle Ninja
Fraction Pizza
Memory Pairs

Slug

The slug is the URL name.

Example:

angle-ninja
fraction-pizza
memory-pairs

The slug should use only lowercase letters, numbers, and hyphens.

Good slugs:

math-runner
thai-word-builder
music-rhythm-tap
sdg-recycling-sort

Bad slugs:

Math Runner
math_runner
math/runner
math.runner

Short description

This is the small text shown on the game card.

Example:

Practice angle recognition with a fast and friendly ninja challenge.

Keep this short and clear.

Long description

This can explain the learning goal, age group, instructions, and educational idea.

Example:

Angle Ninja helps learners recognize acute, right, obtuse, and straight angles. It is suitable for children who already know basic angle names and need playful practice.

Category

Categories are the main boxes for organizing games.

Examples:

Math Games
Language Games
Music Games
Science Games
Logic Games
Montessori Games
SDG Games
Phuket Local Games

A game usually belongs to one main category.

Tags

Tags are flexible labels.

Examples:

angles, geometry, children, mobile-friendly

A game can have many tags.

Use tags for search, filtering, and describing skills.

Thumbnail URL

This is an optional image URL for the game card.

If no thumbnail is entered, ABC Games shows a gamepad icon.

For best results, use a small image with a clear symbol. Avoid very large images because they slow down the page.

Status

The game status controls the workflow.

Common statuses:

Draft
Pending review
Published
Disabled
Rejected

Normal users only see games that are published and enabled.

Enabled

This is a simple on/off switch for the game.

A game can be published but disabled. In that case it stays in the admin list but does not appear publicly.

Sort order

This controls the manual order.

In the admin table, games can be sorted by drag and drop if they are managed database games.

9. Creating a new simple game

Open:

/abcgames/admin

Click:

Create new game

Then fill in:

Title
Slug
Short description
Long description
Category
Tags
Status
Enabled
HTML code
CSS code
JavaScript code

For your first test, create a very small game. Do not start with a complex game. Start with one button, one score, and one learning goal.

Example: a very simple counting game

Title:

Counting Click Game

Slug:

counting-click-game

Short description:

Click the correct number and practice counting from 1 to 10.

Category:

Math Games

Tags:

counting, numbers, beginner, children, mobile-friendly

HTML code:

<div class="abc-simple-game">
  <h2>Counting Click Game</h2>
  <p id="question">Click number 3</p>
  <div class="number-buttons">
    <button data-number="1">1</button>
    <button data-number="2">2</button>
    <button data-number="3">3</button>
    <button data-number="4">4</button>
  </div>
  <p id="feedback">Choose an answer.</p>
  <p>Score: <span id="score">0</span></p>
</div>

CSS code:

.abc-simple-game {
  text-align: center;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.number-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 20px 0;
}

.number-buttons button {
  font-size: 24px;
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px solid #ddd;
  cursor: pointer;
}

JavaScript code:

(function () {
  const root = document.getElementById('abcgames_runtime');
  if (!root) return;

  const feedback = root.querySelector('#feedback');
  const scoreEl = root.querySelector('#score');
  let score = 0;

  root.querySelectorAll('button[data-number]').forEach(function (button) {
    button.addEventListener('click', function () {
      if (button.dataset.number === '3') {
        score += 1;
        feedback.textContent = 'Correct! Well done.';
      } else {
        feedback.textContent = 'Try again.';
      }
      scoreEl.textContent = String(score);
    });
  });
})();

Save the game as Draft first. Test it. Then publish it.

10. How ABC Games separates HTML, CSS, and JavaScript

Many AI tools generate a complete one-page game like this:

<!doctype html>
<html>
<head>
  <style>
    /* CSS here */
  </style>
</head>
<body>
  <div id="game">Game here</div>
  <script>
    // JavaScript here
  </script>
</body>
</html>

ABC Games works better when you split this into three parts:

HTML field

Only the visible game body:

<div id="game">Game here</div>

CSS field

Only the design:

#game {
  padding: 20px;
}

JavaScript field

Only the game logic:

(function () {
  // game logic here
})();

This is cleaner because HumHub already provides the full page, theme, navigation, login system, and layout. The game only needs to provide the game area.

ABC Games can also try to extract style and script blocks if a full HTML document is pasted into the HTML field. But for clean management, manual splitting is better.

11. The golden rule for safe game code

Every game should stay inside the ABC Games runtime container:

<div id="abcgames_runtime" class="abcgames-runtime">
  ... game body ...
</div>

ABC Games creates this wrapper automatically.

Your JavaScript should normally start like this:

(function () {
  const root = document.getElementById('abcgames_runtime');
  if (!root) return;

  // Use root.querySelector(...) instead of document.querySelector(...)
})();

Why this matters:

• It prevents your game from accidentally changing the whole HumHub page.

• It helps avoid conflicts with other modules.

• It makes several games easier to maintain.

• It makes troubleshooting easier.

Good:

const button = root.querySelector('#startButton');

Less safe:

const button = document.querySelector('#startButton');

Very bad:

document.body.innerHTML = 'My game';

Do not let a game replace the whole HumHub body.

12. How to use AI to create games as a non-programmer

You do not need to become a full programmer to start creating useful games. You need to learn how to describe the game clearly and how to test it step by step.

The best process is:

1. Describe the learning goal.

2. Describe the player.

3. Describe the rules.

4. Describe the screen.

5. Ask the AI to create separated HTML, CSS, and JavaScript.

6. Paste the code into ABC Games.

7. Save as Draft.

8. Test.

9. Ask the AI to fix problems.

10. Publish only when it works.

Good AI prompt for a simple game

Create a simple mobile-friendly HTML5 learning game for children age 8-12.

Learning goal: Practice recognizing acute, right, obtuse, and straight angles.

Game idea: The player sees one angle drawing and must choose the correct angle type from four buttons.

Please output the code in three separate sections:
1. HTML body only, without html, head, or body tags.
2. CSS only.
3. JavaScript only.

Important rules:
- The JavaScript must run inside a HumHub module page.
- Use const root = document.getElementById('abcgames_runtime');
- Use root.querySelector instead of document.querySelector where possible.
- Do not use external libraries.
- Do not use document.write.
- Do not replace document.body.
- Make it work on mobile phones and desktop computers.
- Add clear feedback after each answer.
- Add a score.
- Add a restart button.

Good AI prompt for improving a game

Here is my HTML, CSS, and JavaScript for an ABC Games HumHub game.
Please check why it does not work.
Keep the same IDs and class names if possible.
Do not rewrite everything unless necessary.
Explain the exact problem in simple words.
Then give me corrected HTML, CSS, and JavaScript in three separate sections.

Good AI prompt for making a game more educational

Please improve this game educationally.
Add better feedback, small hints, and a short explanation after wrong answers.
Keep the game simple and mobile-friendly.
Do not add external libraries.
Do not change the basic HTML structure unless needed.

Good AI prompt for creating a Thai-English bilingual game

Create a bilingual Thai-English learning game.
The player should be able to switch between English and Thai labels.
Please keep all text inside a simple JavaScript object so I can translate it later.
Output HTML, CSS, and JavaScript separately.
Do not use external libraries.

13. Good game ideas for schools, churches, clubs, and NGOs

ABC Games is especially useful for small educational communities.

Math games

• Counting game

• Times table race

• Fraction pizza

• Angle ninja

• Coordinate plotter

• Prime detective

• Unit converter race

• Money change game

Language games

• Word builder

• Spelling fill

• Vocabulary pairs

• Thai-English matching

• Sentence order game

• Reading comprehension mini quiz

Montessori-inspired games

• Sorting by shape, color, size, or material

• Matching sensorial tablets

• Number rods practice

• Golden bead place value game

• Practical life sequence game

• Nature classification game

Music games

• Rhythm tap game

• Note name matching

• Instrument sound quiz

• Chord mood matching

• Call-and-response melody game

Science games

• Plant parts labeling

• Weather matching

• Animal classification

• Recycling sorting

• Food chain builder

SDG and community games

• Recycling sorter

• Water saving challenge

• Kindness mission picker

• Local map quiz

• Phuket environment challenge

• Food waste reduction game

Church and values games

• Memory verse ordering

• Kindness choices

• Bible story sequence

• Philippians 4 peace challenge

• Good Samaritan decision game

Keep games positive, simple, and encouraging. A good educational game does not need to be complicated. It needs to make practice feel meaningful.

14. Designing a good simple game

A simple game should have one clear goal.

Bad goal:

Teach all of mathematics.

Good goal:

Practice recognizing right angles.

Bad goal:

Teach English.

Good goal:

Practice spelling ten common animal words.

A good simple game usually has:

• One screen.

• One clear question.

• Three to five answer choices.

• Immediate feedback.

• A score.

• A restart button.

• No login requirement inside the game.

• No complicated instructions.

Simple game structure

Title
Short instruction
Question or challenge
Player action
Feedback
Score
Next question
Restart

Example

Title: Fraction Pizza
Instruction: Choose the fraction shown by the pizza.
Challenge: Pizza image shows 3 of 8 slices.
Choices: 1/2, 3/8, 5/8, 8/3
Feedback: Correct! 3 of 8 slices means 3/8.
Score: 1 point
Next: New pizza

15. Designing more complex games

A more complex game can still live inside ABC Games, but it should be carefully structured.

A complex game may include:

• Multiple levels.

• Random questions.

• A timer.

• Lives or hearts.

• Animated SVG graphics.

• Canvas drawing.

• Keyboard and touch controls.

• Sound effects.

• Local progress saved in the browser.

• A settings screen.

• Difficulty options.

Recommended structure for complex JavaScript

Use one main game object:

(function () {
  const root = document.getElementById('abcgames_runtime');
  if (!root) return;

  const game = {
    score: 0,
    level: 1,
    running: false,
    questions: [],

    init() {
      this.cacheElements();
      this.bindEvents();
      this.newRound();
    },

    cacheElements() {
      this.questionEl = root.querySelector('#question');
      this.scoreEl = root.querySelector('#score');
      this.buttons = root.querySelectorAll('[data-answer]');
    },

    bindEvents() {
      this.buttons.forEach((button) => {
        button.addEventListener('click', () => this.checkAnswer(button.dataset.answer));
      });
    },

    newRound() {
      // create next question
    },

    checkAnswer(answer) {
      // check answer and update score
    }
  };

  game.init();
})();

This looks more technical, but the idea is simple:

• Keep all game data in one place.

• Keep setup in init().

• Keep screen element lookup in cacheElements().

• Keep click handling in bindEvents().

• Keep the next challenge in newRound().

• Keep answer checking in checkAnswer().

This makes the game easier for AI and humans to repair.

16. Mobile-friendly game design

Many users will play on smartphones.

Good mobile game rules:

• Use large buttons.

• Avoid tiny text.

• Avoid hover-only effects.

• Make the game work in portrait mode.

• Use flexible layouts.

• Keep the game width inside the screen.

• Avoid huge images.

• Avoid controls that need a physical keyboard.

• Use both click and touch-friendly controls.

Good CSS pattern:

.game-board {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer-grid button {
  min-height: 54px;
  font-size: 18px;
}

@media (max-width: 480px) {
  .answer-grid {
    grid-template-columns: 1fr;
  }
}

This makes buttons appear in two columns on larger screens and one column on small phones.

17. Graphics in ABC Games

A game can use several types of graphics.

Text and CSS shapes

This is the easiest and fastest.

Example:

<div class="circle"></div>

.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #4aa3ff;
}

SVG graphics

SVG is excellent for educational games because it is sharp, lightweight, and easy to animate.

Example:

<svg viewBox="0 0 200 120" class="angle-svg">
  <line x1="40" y1="90" x2="160" y2="90" stroke="currentColor" stroke-width="8" />
  <line x1="40" y1="90" x2="100" y2="30" stroke="currentColor" stroke-width="8" />
</svg>

SVG works well for angles, shapes, maps, charts, musical symbols, and diagrams.

Canvas graphics

Canvas is useful for more active games, drawing games, moving objects, or arcade-style practice.

Canvas is more powerful but harder to debug. Use it only when SVG and normal HTML are not enough.

Image files

Images can be used, but keep them small.

Recommended:

• Use compressed images.

• Use WebP or optimized PNG/JPG where possible.

• Avoid very large photos.

• Prefer simple icons and illustrations.

If graphics sometimes appear only after reloading, the usual causes are:

• The game was loaded with PJAX instead of a full page load.

• JavaScript starts before the game elements exist.

• Images are too large or slow.

• The game depends on an external file that was blocked or loaded too late.

ABC Games disables PJAX on game links, but your custom JavaScript should still be written carefully.

Good initialization pattern:

(function () {
  function startGame() {
    const root = document.getElementById('abcgames_runtime');
    if (!root) return;
    // game setup here
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', startGame);
  } else {
    startGame();
  }
})();

18. Sound in games

Small sound effects can make games more fun, but use them carefully.

Recommended rules:

• Do not autoplay sound when the page opens.

• Start sound only after the player clicks or taps.

• Keep sound optional.

• Add a mute button for longer games.

• Keep files small.

Simple sound example:

function playBeep() {
  const audio = new Audio('/path/to/small-sound.mp3');
  audio.volume = 0.3;
  audio.play().catch(function () {
    // Browser blocked sound until user interaction. This is normal.
  });
}

For most educational games, visual feedback is more important than sound.

19. Saving progress

ABC Games does not currently provide a full student progress tracking system. A simple game can still save small local progress in the user’s browser using localStorage.

Example:

localStorage.setItem('abcgames_angle_ninja_best_score', String(score));

Read it later:

const bestScore = Number(localStorage.getItem('abcgames_angle_ninja_best_score') || 0);

Important:

• localStorage saves only in the same browser on the same device.

• It is not a school report system.

• It is not reliable for official assessment.

• Users can clear it.

For future versions, ABC Games could add real server-side progress tracking, certificates, badges, or integration with ABC Badges.

20. Categories and tags strategy

Use categories for the main shelf. Use tags for details.

Good category examples

Math Games
Language Games
Science Games
Music Games
Logic Games
Montessori Games
SDG Games
Community Games

Good tag examples

fractions
angles
spelling
thai
english
memory
keyboard
mobile-friendly
age-6-8
age-9-12
montessori
recycling
music

Recommended tag style

Use lowercase tags:

fractions, geometry, mobile-friendly

Avoid duplicates:

Math, math, Maths, mathematics

Choose one pattern and use it consistently.

For age groups, use tags like:

age-4-6
age-6-8
age-9-12
age-13-plus

For languages, use:

en
th
bilingual
thai-english

21. Publishing workflow

A safe publishing workflow prevents broken or unfinished games from appearing publicly.

Recommended workflow:

1. Draft

Use Draft while creating the game.

The game is not ready yet.

2. Test

Use the Play button from the admin table.

Check:

• Does the game open?

• Are graphics visible?

• Do buttons work?

• Does it work on a phone?

• Does it work on a desktop?

• Does the score update?

• Are the instructions clear?

• Is the language correct?

3. Pending review

Use this when one person creates a game and another person should check it.

4. Published

Use Published when the game is ready.

5. Enabled

Make sure Enabled is checked.

6. Select it globally or inside Spaces

A game can be published but still not selected in the global directory or a Space. Select it where it should appear.

22. Simple quality checklist before publishing

Before publishing a game, check these points:

[ ] The title is clear.
[ ] The slug is lowercase and uses hyphens.
[ ] The short description explains the game in one sentence.
[ ] The category is correct.
[ ] Tags are useful and not duplicated.
[ ] The game opens without JavaScript errors.
[ ] It works on a phone.
[ ] It works on a desktop.
[ ] Buttons are large enough.
[ ] The player understands what to do.
[ ] Feedback is friendly.
[ ] Wrong answers teach something.
[ ] The game can be restarted.
[ ] No external scripts are loaded unless absolutely necessary.
[ ] No code replaces the whole HumHub page.
[ ] The game is Published.
[ ] The game is Enabled.
[ ] The game is selected globally or in the correct Space.

23. Troubleshooting

Problem: The game URL becomes /p/games/...

Cause:

HumHub Pages or an old custom page may still own the games slug.

Solution:

• Check HumHub Custom Pages.

• Remove or rename any old page with slug games.

• Use /games/<slug> as the preferred URL.

ABC Games includes legacy compatibility rendering for /p/games/<slug> to avoid redirect loops.

Problem: The game shows only after reloading

Possible causes:

• PJAX partial loading interfered with game startup.

• JavaScript started before the HTML was ready.

• An image or script loaded too slowly.

• The game uses window.onload in a way that conflicts with HumHub.

Solutions:

• ABC Games already uses data-pjax="0" on game links.

• Use a safe initialization pattern in JavaScript.

• Keep images small.

• Avoid external libraries for simple games.

• Avoid replacing window.onload; use addEventListener instead.

Good:

window.addEventListener('load', function () {
  // setup
});

Less good:

window.onload = function () {
  // setup
};

Problem: Buttons do nothing

Check:

• Are the IDs in HTML and JavaScript the same?

• Is the JavaScript field saved?

• Is the code wrapped in a function?

• Does the browser console show an error?

• Did the game use document.querySelector when it should use root.querySelector?

Problem: CSS changes the whole HumHub page

Cause:

The CSS uses broad selectors like:

body { ... }
button { ... }
div { ... }

Solution:

Use game-specific classes:

.my-game button { ... }

ABC Games scopes CSS to the runtime container, but good class names still make games easier to maintain.

Problem: A game is visible in admin but not visible publicly

Check:

[ ] Is status Published?
[ ] Is Enabled checked?
[ ] Is it selected in the global game directory settings?
[ ] If inside a Space, is ABC Games enabled for that Space?
[ ] If inside a Space, is the game selected in that Space configuration?

Problem: Create/Edit buttons are missing

Possible cause:

The managed game database tables are not installed.

Run:

php protected/yii migrate/up --includeModuleMigrations=1
php protected/yii cache/flush-all

Problem: A Space always shows the Games menu

Expected behavior:

The Space menu should only show when ABC Games is enabled in that Space and selected games are available.

If it appears everywhere, clear the cache and check that the latest module version is installed:

php protected/yii module/scan
php protected/yii cache/flush-all

24. Security and responsibility

ABC Games allows trusted administrators to paste HTML, CSS, and JavaScript. That is powerful.

JavaScript can change page behavior. Therefore:

• Do not allow unknown users to create games directly.

• Do not paste code from people you do not trust.

• Do not paste tracking scripts.

• Do not paste advertising scripts unless your platform policy allows it.

• Do not paste code that asks users for passwords.

• Do not paste code that sends user data to outside servers.

• Avoid external JavaScript libraries unless you understand them.

The module is designed for trusted admins and trusted game editors.

For community submissions, use a review workflow:

User submits idea → Game admin builds draft → Admin reviews → Admin publishes

Do not allow public anonymous raw JavaScript submission.

25. Recommended roles

Site administrator

Can manage the full module.

Typical tasks:

• Install module.

• Run migrations.

• Import starter games.

• Set global settings.

• Publish and disable games.

• Manage categories and tags.

Game admin

A trusted editor who can create and manage games.

ABC Games checks for a group named:

Game admins

If your HumHub setup exposes the expected group membership API, members of this group can manage games without needing full site administrator rights.

Space administrator

Can enable ABC Games inside a Space and select which games appear there.

Typical tasks:

• Enable ABC Games for the Space.

• Choose suitable games.

• Remove games that do not fit the Space.

26. Developing games directly in resources/games

Most normal admins should use the database form. Developers may still add starter games directly into:

resources/games

A starter game is usually a single .html file.

Example:

resources/games/my-new-game.html

The file can include:

<style>
  /* game CSS */
</style>

<div class="my-new-game">
  <!-- game body -->
</div>

<script>
  // game JavaScript
</script>

After adding a new starter file, the module developer may need to update the bundled metadata in the game model/registry, depending on how the current version discovers starter games.

For normal admins, the easier way is still:

/abcgames/admin → Create new game

27. Recommended coding rules for ABC Games

Even if AI writes the code, ask it to follow these rules.

Use unique IDs and class names

Good:

<div class="angle-ninja-game">
  <button id="angleNinjaStart">Start</button>
</div>

Bad:

<div class="game">
  <button id="start">Start</button>
</div>

Why? Many games may use start, score, or game. Unique names reduce conflicts.

Use an IIFE wrapper

Good:

(function () {
  const root = document.getElementById('abcgames_runtime');
  if (!root) return;
  // game code
})();

This keeps variables out of the global window as much as possible.

Do not use document.write

Bad:

document.write('Game');

This can break the HumHub page.

Do not replace the page

Bad:

document.body.innerHTML = 'Game';

This destroys the HumHub layout.

Avoid external scripts

Better:

Use plain JavaScript for simple games.

Riskier:

<script src="https://unknown-site.example/game-library.js"></script>

Keep code readable

Ask AI to add comments in plain English.

Example:

// Choose a random question for the next round.

Readable code is easier to fix later.

28. From simple game to complex game: growth path

A good development path is:

Level 1: One question, one answer

Example:

Click the number 3.

Level 2: Random questions

Example:

The target number changes every round.

Level 3: Score

Example:

Correct answers add points.

Level 4: Timer

Example:

Answer as many questions as possible in 60 seconds.

Level 5: Levels

Example:

Level 1: numbers 1-10.
Level 2: numbers 1-20.
Level 3: numbers 1-100.

Level 6: Hints

Example:

Wrong answer shows a small explanation.

Level 7: Progress

Example:

Best score saved locally in the browser.

Level 8: Rich graphics

Example:

SVG diagrams, animated shapes, or canvas movement.

Do not jump directly to Level 8. Build simple, test, improve.

29. Example AI workflow for a complete game

Step 1: Idea

I want a game where children practice recycling by dragging items into correct bins.

Step 2: Ask AI for a simple version

Create a simple recycling sorting game for children.
Use click-to-select instead of drag and drop first, because it must work well on mobile.
Output HTML, CSS, and JavaScript separately.
Use root = document.getElementById('abcgames_runtime').
No external libraries.

Step 3: Paste into ABC Games

Create a new game and paste the three code sections.

Step 4: Save as Draft

Do not publish yet.

Step 5: Test

Check phone and desktop.

Step 6: Improve

Ask AI:

The game works. Please add 3 levels and friendlier explanations after wrong answers.
Keep the same HTML IDs if possible.

Step 7: Add category and tags

Category:

SDG Games

Tags:

recycling, environment, sdg, children, mobile-friendly

Step 8: Publish

Set status to Published and Enabled.

Step 9: Select where it appears

Select it in the global directory or in specific Spaces.

30. ABC Games vision

ABC Games is more than a game list. It can become a small educational game workshop inside HumHub.

The vision is:

• Teachers can describe a learning problem.

• AI can help generate a first simple game.

• The teacher or admin can paste it into ABC Games.

• The game can be tested immediately.

• The game can be improved step by step.

• Different Spaces can choose games that fit their learners.

• A community can build a shared library of local learning games.

This is especially powerful for small schools, homeschooling groups, NGOs, churches, music programs, sports clubs, Montessori groups, and community education projects.

A teacher does not need to become a software engineer to start. The teacher needs a clear learning goal, a simple game idea, and the courage to test and improve.

The best games are often small:

One skill.
One screen.
One joyful challenge.
Immediate feedback.
Repeatable practice.

That is exactly where ABC Games can be strong.

31. Short administrator checklist

After installation:

[ ] Upload module.
[ ] Run module scan.
[ ] Enable module.
[ ] Run migrations.
[ ] Clear cache.
[ ] Open /abcgames/admin.
[ ] Import starter games.
[ ] Check /games.
[ ] Publish/enable selected games.
[ ] Configure global directory selection.
[ ] Enable ABC Games only in Spaces where it belongs.
[ ] Configure selected games per Space.

For each new game:

[ ] Create game.
[ ] Add title and slug.
[ ] Add short description.
[ ] Add category.
[ ] Add useful tags.
[ ] Paste HTML.
[ ] Paste CSS.
[ ] Paste JavaScript.
[ ] Save as Draft.
[ ] Test.
[ ] Fix.
[ ] Publish.
[ ] Enable.
[ ] Select globally or in Spaces.

32. Short non-programmer checklist

When asking AI to create a game, always tell it:

[ ] Make it mobile-friendly.
[ ] Use plain HTML, CSS, and JavaScript.
[ ] Do not use external libraries.
[ ] Output HTML, CSS, and JavaScript separately.
[ ] Use document.getElementById('abcgames_runtime') as the root.
[ ] Do not use document.write.
[ ] Do not replace document.body.
[ ] Add clear instructions.
[ ] Add friendly feedback.
[ ] Add a restart button.

This simple checklist prevents many problems.

33. Final note

ABC Games should make educational game creation feel possible.

A non-programmer can start with AI-generated code. A teacher can focus on the learning goal. A Space admin can choose suitable games. A site admin can keep control over publishing and safety.

The best way to begin is not to build the biggest game. The best way is to build one small game that helps one learner practice one skill with joy.

Within the ABC Suite ecosystem, ABC Games is planned as a flexible game container. The core module can include small demo games, while additional packages can provide more advanced or specialized games. This makes it possible to keep the main module lightweight while still allowing larger or more complex games to be added later.

ABC Games supports the wider ABC Suite goal of making HumHub more useful for education, youth work, community building, and accessible digital participation. It is especially suitable for platforms where learning and engagement should feel friendly, creative, and motivating.