Teaching Programming to a Middle School Student via AtCoder #1: Background and Environment Overview

Content of This Article

This article records the process of a software engineer teaching programming to their middle school-aged child. This is the first installment. I will outline what we have done so far and the environment set up for taking on the AtCoder challenge this time.

TL;DR (In 3 Lines)

1. Introduced to programming around age 10 with Scratch, Swift Playgrounds, and Human Resource Machine.
2. Currently 13 and attending a public middle school. They prefer solving problems over creating things freely. We decided to give AtCoder a try.
3. Set up a development environment with VSCode on a MacBook Air.

What My Child Learned in Elementary School

They learned the basic concepts of programming while moving the Scratch cat and the character in Swift Playgrounds.

Through the experience of tinkering with those tools, they understand that "writing and executing code makes the computer operate in order exactly as written." They have acquired basic concepts such as variables, assignment, arithmetic operations, conditional branching, loops, function calls, and function definitions.

They occasionally play a game called Human Resource Machine on the Nintendo Switch. They write complex processes using an assembly-like language system and a somewhat difficult-to-use editor. I figured that if they could write that, they could surely handle modern structured languages, so I've been patiently waiting for the right time to teach them.

Human Resource Machine is available not only on the Switch but also on iPhone and Android. It's affordable, so please give it a try if you're interested.

https://apps.apple.com/jp/app/human-resource-machine/id1005098334

I have experience with Z80 and 370 assembler (IBM mainframe assembler), but I can't beat my kid at this game. The difficulty of writing in it makes me want to cry. I want them to write in a more user-friendly modern language and let them use an IDE.

Child's Characteristics and Current Situation

Explaining it like this might make them look like an exceptionally bright child, but it's not quite like that. Looking through a doting parent's filter, I often think, "Are they a genius?!" but I have to stay calm; that's not it. This person is an ordinary public middle school student who acts according to their feelings. If they try something and find it confusing, they lose interest and give up immediately. One moment they seem to be enjoying themselves, and the next they're doing something else—they're quite restless. I guess their sense of time is different from mine. It's the so-called puberty. In our house, we work on the premise that people in puberty are such creatures, and we adjust our approach accordingly.

When dealing with someone in puberty, you have to be extra careful about the timing of the conversation and the fun factor. It requires a hundred times more "spirit of hospitality" than a new employee training session at a company. To all the parents with children in puberty across the country: I feel a sense of camaraderie with you. Great job, everyone. We are doing our best. No doubt about it. Dealing with someone in puberty makes training new employees feel like a breeze.

It seems that as a result of studying English at middle school, they've lost their resistance to things like code, commands, and messages overall, and can now read some of them. Now they've come clean, saying, "When I was in elementary school, the alphabets and symbols overflowing on the screen looked like some kind of cryptic code, and I couldn't really get motivated." I thought they were having quite a bit of fun, but it turns out they were pushing themselves. Kids look carefree, but they actually think about various things and are more considerate than adults think. They're a good kid with a kind side that tries to match their parents' expectations.

It's often said that "in programming, it's best to build what you want to build," but my child seems puzzled by such open-ended assignments. They say they "prefer solving set problems." Since programming doesn't have a collection of problem sets like school studies, and games like Human Resource Machine are not that common, I thought it might be good to try competitive programming.

So, why not try AtCoder at this timing? We decided to give it a shot during the summer vacation.

Policy for Setting Up the Environment

While you can take on AtCoder using just a browser, there are too few clues for a beginner to learn through trial and error, making it difficult to study. I want them to be alerted to syntax errors before execution and to be able to run debugs. For this reason, I decided to set up an environment where they could deepen their understanding by trying various things in VSCode.

Environment Setup

I won't write about the registration of AtCoder or GitHub accounts, or the installation of basic commands required for operation (such as homebrew or git) one by one.

1. Python 3.8 and a virtual environment
2. online-judge-tools and atcoder-cli
3. Visual Studio Code

1. Python 3.8 and Virtual Environment

When I let them choose between Python or JavaScript, they said, "I think I'll go with Python," so I installed it.

• Installed pyenv for python version management
• Installed 3.8.13 using pyenv
  AtCoder uses 3.8.2 as Python 3, so I decided to use the latest in the 3.8 series. I also installed 3.10.5.
• Created a folder for AtCoder and set up a virtual environment there
  mkdir AtCoder; cd AtCoder; python -m venv .venv

2. online-judge-tools and atcoder-cli

https://qiita.com/Adaachill/items/3d4ddad56c5c2cc372cd
Referencing this article, I made it possible to retrieve problems and test inputs from AtCoder and submit written code via the command line.

Settings

atcoder-cli settings

~/Library/Preferences/atcoder-cli-nodejs
├── config.json
├── python3/
│   ├── solve.py*
│   └── template.json
└── session.json

config.json

{
        "oj-path": "/Users/username/.pyenv/shims/oj",
        "default-contest-dirname-format": "{ContestID}",
        "default-task-dirname-format": "{tasklabel}",
        "default-test-dirname-format": "tests",
        "default-task-choice": "inquire",
        "default-template": "python3"
}

python3/solve.py ← ensure chmod +x

#!/usr/bin/env python

python3/template.json

{
  "task": {
    "program": [["solve.py", "solve_{TaskID}.py"]],
  }
}

With these settings, for example, when obtaining Problem A of the ABC 086 contest, it looks like this:

• Folder name: Contest ID
• Answer file name: Contest ID + Task ID
  

3. Visual Studio Code

I installed the necessary extensions and configured them to lower the barrier for execution.

• Necessary extensions for Python
• Command Runner ... an extension that allows you to issue commands from VSCode

https://marketplace.visualstudio.com/items?itemName=edonet.vscode-command-runner

Settings

Command Runner Settings

Command Runner Settings

"command-runner.commands": {
  "acc new": "cd ${workspaceFolder} && acc new ${input} && code -m $(\\ls -1t */*/solve*.py | head -1)",
  "oj test": "cd ${fileDirname} && oj test -c ./${fileBasename} -d ./tests",
  "acc submit": "cd ${fileDirname} && acc submit ./${fileBasename}",
  "acc task": "cd ${fileDirname} && acc task"
},

With this configuration, you can select and execute commands from a list without having to type them.

Debug Execution Configuration

launch.json debug execution settings. Three types of test inputs obtained from AtCoder

  {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File + Input 1",
      "type": "python",
      "request": "launch",
      "cwd": "${fileDirname}",
      "program": "${file}",
      "console": "integratedTerminal",
      "args": ["<", "tests/sample-1.in"],
      "justMyCode": true
    },
    {
      "name": "Python: Current File + Input 2",
      "type": "python",
      "request": "launch",
      "cwd": "${fileDirname}",
      "program": "${file}",
      "console": "integratedTerminal",
      "args": ["<", "tests/sample-2.in"],
      "justMyCode": true
    },
    {
      "name": "Python: Current File + Input 3",
      "type": "python",
      "request": "launch",
      "cwd": "${fileDirname}",
      "program": "${file}",
      "console": "integratedTerminal",
      "args": ["<", "tests/sample-3.in"],
      "justMyCode": true
    }
  ]
}

With this setup, you can select an input file and perform a debug run.

After finishing these preparations, I asked them, "Do you want to try it today?" at a time when they seemed to have some mental space.

【Next Article】
The second installment finally starts the lecture for the child. However, it's an episode where not a single line of code is written.