Giter Club home page Giter Club logo

h5p-game-map's Introduction

H5P Game Map

Let your students choose their exercises on a game map.

Getting started

Clone this repository with git and check out the branch that you are interested in (or choose the branch first and then download the archive, but learning how to use git really makes sense).

Change to the repository directory and run

npm install

to install required modules. Afterwards, you can build the project using

npm run build

or, if you want to let everything be built continuously while you are making changes to the code, run

npm run watch

Before putting the code in production, you should always run npm run build.

Also, you should run

npm run lint

in order to check for coding style guide violations.

The build process will transpile ES6 to earlier versions in order to improve compatibility to older browsers. If you want to use particular functions that some browsers don't support, you'll have to add a polyfill.

The build process will also move the source files into one distribution file and minify the code.

In order to pack an H5P library, please install the H5P CLI tool instead of zipping everything manually. That tool will take care of a couple of things automatically that you will need to know otherwise.

In simple cases, something such as

h5p pack <your-repository-directory> my-awesome-library.h5p

will suffice.

For more information on how to use those distribution files in H5P, please have a look at https://youtu.be/xEgBJaRUBGg and the H5P developer guide at https://h5p.org/library-development.

h5p-game-map's People

Contributors

otacke avatar weblate avatar fnoks avatar translate-h5p avatar samumist avatar languafe avatar miropuhek avatar e-me avatar

Stargazers

Stef avatar Phan Khắc Hiếu avatar Gwenillia avatar

Watchers

Alexandre Enkerli avatar  avatar  avatar

h5p-game-map's Issues

Check resize behavior of subcontent

Check what causes Memory Game as subcontent to behave weirdly (when changing orientation). Could be some issue in Memory Game, could be a missing "resize" event, ...

Announce timeout warning visually

"The current timeout warning only offers an option to add audio, but I believe visual stimulation is important too (if not more, people often mute sounds in their games). My suggestion is to change the color of the timer to red (when in warning mode) and consider adding a scale-in and scale-out animation effect to the icon. This will provide users with a sense of urgency and make them extra aware of the time remaining."

Position stage labels on top of all stage icons (map elements)

Hi, thank you for this excellent engaging game map H5P content, which greatly enriches one of my training courses (preparation work currently still in progress: https://academy.siscc.org/courses/disseminating-data-with-an-optimised-end-user-experience/).

Currently, the stage labels (on mouse-over) are shown on top of all previous stage icons (map elements). Unfortunately, in one of my game maps, the stages are placed in a way where later stages cover the labels of previous stages, which become unreadable.

Example:
image

Would it please be possible to position stage labels always on top of all stage icons (rather than only the previous ones)?

Note:
The issue doesn't happen in the content editor or the H5P admin interface, according to my findings thanks to the larger map size. Indeed, the above image is made when the user takes the course and where the course content is limited to a max-width: 700px;. When changing this value to max-width: 1000px; then the issue strangely disappears:
image

Final comment:
It would be great also if the label size allowed for a little longer texts.

Thanks in advance!

Add special stage: Link

"As an author, I want to be able to add a special stage that allows me to link to some other URL."

  • Should be a special stage, but can be opened multiple times (number of times a special stage can be opened should become a varable)

Add option to add image to map

Add option to add image to map.

  • Should get a separate icon for the toolbar.
  • Would allow to animate the map using GIFs.

Fix text overflow

Not a very realistic scenario, but very long words without any spaces can lead to overflowing text.

Add overflow-wrap: anywhere; where needed.

Add non-exercise stage

As an author, I want to be able to add non-exercise stages that trigger some other action.

  • Add separate button to editor for new stage type
  • Add select menu for stage type (end, + life/lives, +time)
  • Add conditional options for stage type (always show/number of lives, number of seconds)

As a user, when I open a non-exercise stage, I want its effect to take effect.

  • end stage (finish flag icon): open confirmation dialog for ending the game.
  • +lives (heart icon): Receive the assigned number of lives (if not yet opened), play sound
  • +time (clock icon): Receive the assigned time as bonus (if not yet opened), play sound

Add time based restrictions for a level

Add time based restrictions for a level, e. g.:

  • Level cannot be opened before a certain date has been reached
  • Level cannot be opened after a certain date has been reached

Add more content types as subcontent

Add more content types as subcontent.

Some content types seemed to cause trouble when used as subcontent, and I’ll have to add a workaround or the content type might need changing.

Reduce timeout for label hovers

"The timeout for titles is too long - users usually don’t hover for too long unless they know that the title is supposed to show up. I recommend reducing the timeout to make the titles appear more quickly"

Add invincibility stage

_As an author, I want to be able to add an "invincibility" stage in order to give the user a time period without risking to lose a life (star in Super Mario World).

Would involve:

  • Adding the stage definition (shield symbol)
  • Adding the logic with a timeout to block life loss
  • Speeding up the background music (as in Super Mario World)
  • Adding a timeout warning sound event

Add timer for the complete map

As an author, I want to be able to set a time limit for the whole map.

As a user, when a time limit for the whole map is set, I want to (not really, but hey) be game over and taken to the end screen for losing.

  • Needs to ensure that exercise timers are stopped.
  • Needs to add a confirmation dialog with message.
  • Needs to add an exception for when the end screen is shown.

Improve end-to-end testing

  • Add test content parameters as assets and dynamically build content instead of requiring prebuilt H5P content files
  • Add github workflow
  • Find a good way to switch between local testing in an H5P CLI tool context and remote testing in a github workflow (and local testing outside of an H5P CLI tool context?)
  • Improve code im general
  • Add a server start and a server stop command to the H5P CLI tool to allow it running in detached mode.

Change size of dots

Would it be possible to allow authors to adapt the size of the dots for each stage?

Fix fog when resetting

When "no fog" is set in the settings, that setting is respected when starting the content, but it is ignored when resetting.

Add option to add text to map

Add option to add text to map

  • Should get its own icon in the toolbar.
  • Could be used to tweak the map without having to edit the background image.

Add stars to indicate completion status of a node

"Ideally, we would use the star(s) to visualize the score (example on the right), since we also present the score with a star in the top menu, but I assume adding this feature would be time consuming and probably won’t be a high priority task"

image

Rename "fog"

"This label is misleading, I believe users would expect to “blur” the map based on the description of the label since that is the first thing that comes to your mind when you say “fog”. I would personally expect this outcome:

Maybe “Visibility Range” can be an option for the label?"

Allow multiple connected maps

As an author, I want to be able to use a set of connected maps in order to enlarge the area that can be explored (similar to how Super Mario World uses tubes on the map).

Would at least involve:

  • Using a list of maps (gamemapSteps) instead of just one
  • Deciding what options should be choosable/reusable/overridable for each map individually (e.g. different background music for each map)
  • Change logic to handle lists of maps (keep track of current map, change (re)storing the state, etc. )
  • Add logic to jump between maps (display confirmation, visual transition, sound, ...)
  • Change logic to handle individual options
  • Amend special stages with a "teleport" option in editor
    • allows to choose a target map and a target stage from all the currently available maps/stages or to jump randomly
    • allows to optionally add a confirmation message (e.g. if returning to the previous map will not be possible)
    • allow to decide whether the stage can be used only once or repeatedly (default)
    • handles targets that were chosen but that then got deleted (set to random and display warning with list of targets)
  • Add editor option for teleport sound

Fix text overflow

Not a very realistic scenario, but very long words without any spaces can lead to overflowing text.

Add overflow-wrap: anywhere; where needed.

Improve labels

Color stage -> Color not visited stage
Color stage locked -> Color locked stage
Color stage clear -> Color completed stage

Retrieve maximum possible score in editor

When setting the finish score, the author is currently not aware what the maximum possible score is. Should be displayed somewhere (the "finish score" setting is outside of the custom editor widget, so maybe in some extra titlebar or other info area).

In order to determine the maximum possible score of every subcontent type, one will need to instantiate the content in the editor, attach it to some hidden DOM area and then call getMaxScore on the instance - there's no other feasible way to determine the maximum score.

"You lost all your lives please try again" after having obtained max score

After having obtained max score on "https://www.olivertacke.de/labs/wp-admin/admin-ajax.php?action=h5p_embed&id=146" I continued playing and lost my last life. I got the "You lost all your lives please try again" message. Frustrating me a bit as I would have expected to not loose more lives after having obtained max score. I.e. that I would be in explore mode.

After having received the lost all your lives message I got the "Congratulations you made it" screen, which I guess I liked better than having to try again, but also felt weird as the previous screen declared me as dead and having to start over :)

Steps to reproduce:

  • Obtain full score
  • Continue playing and loose all your lives

Stage content cryptex

Add Stage content Cryptex
Admn sets password numbers or letters
User must find matching password to open Cryptex
When cryptex is opened 1 point is awardwed and optional message, video or sound is played

Check scrolling fullscreen mode

It seems that in fullscreen mode, scrolling does not (always? in mobile contexts?) work if the content exceeds the available viewport height.

Try to reproduce and fix.

different colors for different paths

Hi! It would be great to be able to give stations different colors (or other visible attributes) in order to create a kind of differentiation. For example, paths could be marked in different colors to represent different levels of difficulty (very useful for school).

Add Questionnaire as subcontent (if possible)

Add Questionnaire as subcontent if possible. Should work, but check behavior for

  • resuming
  • resizing
  • GameMap with Questionnaire uploaded to H5P integration without "enableReporting" flag set

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.