Pixel art puzzle tutorial

Engaging and interactive, pixel art puzzles provide an enjoyable method for learning. In this tutorial, we will show how to craft educational materials using a spreadsheet and Appizy platform.

Here is what we are going to create.

👇 You can download the spreadsheet used in this tutorial right at the end of the article 👇

Puzzle setup

You should first create a set of questions based on the age and grade level of the learners. Each question should be accompanied by its corresponding answer box, placed in the cell directly adjacent to it. Enhance the visual clarity of the answers by highlighting the respective cells.

As part of the setup, obtain a pixelated image. In our example, we are using a watermelon.

Questions and pixel image setup

Formulas

The idea is to write a formula that displays specific text, such as a dot, when the correct answer is provided. The significance of this will become apparent in the next step. Here is an example with the answer in C3:

=IF(C3=4,".", """)

Next, we apply the same formula to all cells that should depend on this correct answer. We then replicate these principles for the other answers.

Pixel setup link to the correct answer

By the end of this step, our pixel grid is filled with formulas that will exhibit a dot if the answer is correct. Finally, we move the pixel art to another tab. It’s time to proceed to Appizy to finalize our pixel art math project.

Appizy conversion with custom style

Let’s move now to Appizy. We are going to convert our spreadsheet to web format adding a little bit of style of top of what we have. If you’re not acquainted with CSS, there’s no need to feel intimidated. CSS is the web language used to style elements on any webpage.

Feel free to trust us and simply copy/paste the code below.

td.out:has(> div:empty) { background: none; }
td.out { line-height: 0;color:transparent;}

The first block instructs: “If the cell is empty, remove its background.” This action ensures the pixel’s color is removed until the pupils discover the correct answer.

The second block dictates: “Make the content of the filled cell invisible.” This step eliminates the small text we added in our formula during the second step.

Appizy custom styles settings

And there you have it!

Conclusion

In this example, we explored the process of creating a basic multiplication exercise. However, the methodology we’ve covered is not limited to mathematical concepts. It can be seamlessly applied to generate assessments in various other domains, such as history, grammar, and languages.

This flexibility makes the technique a valuable tool for fostering interactive and dynamic learning experiences across a range of academic domains.

Ressources