📘
Portfolio
  • Rebecca (Becky) Peltz
  • Education, Skills, Certifications
  • Work History
  • Projects
    • Hackathon Projects
      • Traveler's Translator: Translation and Speech AI
      • Eleanor: An AI Application
      • Prototype for Hackathon 3D Project
      • Dev.to Cloudflare AI Challenge: Recipe Generator
    • Learning Modules
      • Introduction to Web Development
      • Using AI at Home and in the Workplace
      • Blockchain Learning
    • Learning Apps
      • Design, Create, and Publish a Chrome Extension
      • Code Notebooks
      • Periodic Table of Cloudinary Transformations
      • Transformation Concentration
      • Code Sandbox Playground for Cloudinary Transformations Prototype
  • Blogs
    • dev.to
    • Medium
Powered by GitBook
On this page
  • Description
  • Tools and Technology
  1. Projects
  2. Learning Apps

Transformation Concentration

Play the game of Concentration to learn about Cloudinary transformations.

PreviousPeriodic Table of Cloudinary TransformationsNextCode Sandbox Playground for Cloudinary Transformations Prototype

Last updated 7 months ago

Description

Remember the Classic television show ? 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.

Tools and Technology

This game was built using React.

Code
Application
Concentration
Gamifying Learning by using the Concentration game format to learn common transformations
Training Page