Gamifying Learning by using the Concentration game format to learn common transformations
### Description
Remember the Classic television show [Concentration](https://www.youtube.com/watch?v=mJnOuAVNstg)? The game requires players to remember an image they recently saw and match it to another picture on the board. The learning game in this application requires the player to learn a set of Cloudinary effects and then use the knowledge to match two squares on the board.
Cloudinary is a SAAS product that makes it easy to transform images. To create a transformation, the user uploads a file to Cloudinary. Then, the image may be transformed by injecting instructions into the path of the uploaded image's URL.
Transformations may deal with sizing and optimization or apply special effects. In this game, the player learns to recognize and name special effects.
First, a training page is displayed, and then the user sees the image above. The names and sample images are randomly loaded behind the Cloudinary logo. The user must click on two logo images to see if they match. If there's a match, the name and image remain visible; otherwise, they are hidden.
#### Training Page
The training page is shown below. To win the game, players must be able to match an image to the word describing it. For example, on the upper left, a chicken photo is cartoonified. The player must learn to associate the image of the cartoonified chicken with the word Cartoonify.
Training Page
### Tools and Technology
This game was built using React.
[Code](https://github.com/rebeccapeltz/transformation-concentration)
[Application](https://transformation-concentration.netlify.app/)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://rpeltz.gitbook.io/portfolio/projects/learning-apps/transformation-concentration.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.