An AR card game where the user uses basic AND, OR and NOT gates to solve basic problems and help the user retain the knowledge of these different gates and how to reuse them for future applications.

Application Description

This application is an attempt to teach the user how to use the basic AND, OR and NOT gates to get them used to thinking in a way programmers think when constantly checking how different variables are affected inside their pieces of code.  

The form of a card game helps not only because it's fun for kids and was easily shareable to people in the same room as you, but also due to it helping basic memory retention. In the case study of the GOT IT! vocabulary retention game, the card game helped improve the retention of vocabulary by associating it with a card and by sharing it with others in groups (Razali, W.N, et al, 2017).

Other than improving retention, it also teaches the users that some of the bigger problems in coding uses the smaller pieces, and having the foundations down  can help  improve your coding skills on the whole An example of this is provided in the first level, where it shows the breaking down of the puzzle and also shows that there are often multiple solutions, just like in coding. With the outer two lights on, but the middle two lights off, you cannot simply use all AND statements, but require some more thought. You could simply do all OR statements (Which is a design flaw in the game), but you could instead use NOT gates to fix the off buttons to turn them back on or use a combination of all gates to fix this puzzle. Depending on your level of coding, you could minimise the amount of blocks needed, exclude others, use one of each and so on until you learned every way possible.

Using AR, the application could easily show how these cards affect one another by showing how the different gates affect one another, such as the OR inverting the input or the AND requiring both lights to be on, while still giving the ease of use that moving cards around a desk allows. Nothing quite beats the physical interaction of these distinct elements, and I believe using physical cards strengthens the fact that these different types of gates are pieces of a larger puzzle, which is basically programming in a nutshell.

Interface Design

The main interaction of the application is the shuffling of gate cards around, which aims to visually show how the different gates can change the end result by putting them in a different order. To show this off, instead of using all the different gates (AND, OR, XOR, etc) it was decided to use just the basics of AND, OR and NOT. This is because these three are the building blocks of the other gates, and although it would look more complicated than just having those cards be separate things. It also allows the puzzles that follow to be easily split into its simplest elements, making it even simpler to figure out the solution to a given puzzle.

The puzzle first works by scanning a card, in this case the only one there is. This allows the user to find an exact playing area, while allowing the phone to move to observe the scene better. Then you grab a bunch of cards you are going to use and then first get the inputs by placing the card next to the lights, and when the card's object turns a certain colour (Blue for OFF and Yellow for ON), you can then use that card as a future one's input.
This was chosen to get the user to think about the first part of the problem first and then build up to the larger picture, as well as to remove unnecessary buttons. To remove a part, you simply move the input away or this card and it should automatically be removed.

If this application was developed into the future, there are three main things I would like to polish out...

1. Getting the visuals of changing colour to work properly, as of now it fails to do so and makes it near impossible to figure out if the connection 
2. Creating more levels, showing the first connection through a simple 1 input to 1 output level to something as complex as making the output light be on for only one desired outcome but off for literally all other outcomes.
3. Start putting in new mechanics like for loops and different types of inputs (Such as an INT, instead of the boolean light on and off). This could ramp up the difficulty and really immerse the user into new concepts quite easily.

Technical Development

This application was prototyped through using my laptop camera and using my monitor to have the various cards. Because of this, the application broke down and didn’t register most colour changes which left the app in a broken state. I didn’t realise this until just before the finalisation of the report, however it was 

Models

The different cards have basic unity 3d objects shown and the only other two assets are as shown…

Playing Cards

Used because the custom images I made did not have enough detail to reliably be picked up by the camera. This works wonders to provide detail and allows the user to use the cards after the time with the application is over.

Lightbulb

Used to indicate the inputs and output lights. Would have added some to the other images but the asset is split into two different sections in the light prefab and didn’t have the time to fix it. For those card objects, I changed the colour to match what it would look like when 

References

GOT IT! Retention Game (Razali, W.N, et al, 2017)

Razali, W.N., Amin, M.N., Kudus, N.V. and Musa, M.K., 2017. Using card game to improve vocabulary retention: A preliminary study. International Academic Research Journal of Social Science, 3(1), pp.30-36.

UNITY ASSETS

Poker Playing Cards (macrovector, n.d.)

macrovector, n.d. Full deck of poker playing cards. [image] Available at: https://www.freepik.com/free-vector/full-deck-poker-playing-cards_6086127.htm#query=playing%20card&position=4&from_view=keyword.

Lightbulb (Unity Asset Store)

thu0x33, 2022. LightBulb. [online] Unity. Available at: https://assetstore.unity.com/packages/3d/props/interior/lightbulb-218258.