Implement an Interactive Mascot with Speech Bubble

[stapps21]

Description

The objective is to create an interactive mascot that is consistently displayed in the bottom left corner of the user interface. Clicking on the mascot will trigger a speech bubble that either uses text-to-speech technology or plays pre-recorded audio to read aloud the text displayed.

Tasks

• [ ] Design and Implement Mascot:
  • Create a visually appealing mascot. (@BaischElia)
  • Ensure the mascot remains visible in the bottom right corner across various devices and screen sizes.
• [ ] Design wireframe of where the mascot is positioned and how the speech buble is designed (@anniekolb)
• [ ] Implement functionality for the mascot to be clickable, activating a speech bubble
• [ ] Integrate Audio Output:
  • Discuss and decide whether to use text-to-speech technology or pre-recorded audio for reading the text in the speech bubble.
  • Implement the chosen audio method ensuring it is compatible across different browsers and devices.

User Story

As a user, I want to interact with a site mascot so that I can receive audible guidance, enhancing my engagement and experience on the site.

Acceptance Criteria

• The mascot is consistently visible and correctly positioned on all screen sizes.
• The speech bubble activates smoothly.
• Audio output functions properly with clear and understandable speech.

Discussion Points

• Determine whether to implement text-to-speech technology or use pre-recorded messages based on ease of implementation, quality of user experience, and ongoing maintenance considerations.

[pascall2]

The mascot would fit better in the bottom left corner so that the speech bubble can be to the right of it

[stapps21]

The mascot would fit better in the bottom left corner so that the speech bubble can be to the right of it

Originally, I proposed bottom right to align with the PH students' concept, but of course, bottom left is also fine.👍 I will change the issue description accordingly.

[stapps21]

@anniekolb it would be nice if you could support @pascall2 in designing how the speech-bubble should look like and how it should be positioned etc.