Math Game

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.8.0", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home Report An Issue

Math Game

Build a mental math game using LiveView.

The game should:

• Prompt the user with a random math addition question: i.e. 2 + 3.
• Have a text input the user can enter their answer into.
• Have a button users can submit their answer with.
• Track the score of the user, and increment the score with each correct answer.

Bonus: Submit Answer On Enter

Make it so that players can submit their answer without pressing a button, but can alternatively press the Enter key to submit their answer.

Mastery: Track Highscores

Track the current player scores. You might choose to persist this in memory or using a Database. Display the current player scores in the math game. You should be able to open two clients, and each player’s score will be tracked and displayed in real-time.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "math_game_reading"
    "exercises" -> "math_game_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b math-game-exercise
$ git add .
$ git commit -m "finish math game exercise"
$ git push origin math-game-exercise

Create a pull request from your math-game-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next