More than 5 years have passed since last update.

日本オラクル株式会社

夏休みなので小学生とPythonを勉強してみた - 課題7 掛け算ゲームWeb版

Last updated at 2019-08-26Posted at 2019-08-23

小学6年生の長男が夏休みの自由研究にPythonを勉強したいというので付き合ってみました。
どこから手を付けていけばわからないので、いくつか課題を出し、それを実現するコードを一緒に書くということを繰り返しました。

この記事では、「課題7 掛け算ゲームWeb版」について扱います。その他の課題については下記の記事をご覧ください。

コードはGitHubにて公開しています。

課題7-1 ランダムに選んだ掛け算を表示する

指示

1から9の範囲でランダムに選ばれた数を2つ用意し、それらを掛け算した結果をブラウザに表示するプログラムを作りましょう。

ヒント

Webアプリケーション・フレームワークとしてFlaskを使うことにします。

Welcome to Flask — Flask Documentation

FlaskのQuickstartにある、Minimal Applicationを参考にして作成します。

A Minimal Application -- Quickstart — Flask Documentation

回答例

01_multiplication.py

import random

from flask import Flask

app = Flask(__name__)


@app.route('/')
def index():
    a = random.randrange(1, 10)
    b = random.randrange(1, 10)
    return f'{a} * {b} = {a * b}'

実行例

$ FLASK_APP=01_multiplication.py FLASK_ENV=development flask run --host=0.0.0.0
 * Serving Flask app "01_multiplication.py" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 867-383-452
127.0.0.1 - - [23/Aug/2019 05:54:50] "GET / HTTP/1.1" 200 -

課題7-2 HTMLテンプレートの使用

指示

1から9の範囲でランダムに選ばれた数を2つ用意し、それらを掛け算した結果をHTMLテンプレートを使用してブラウザに表示するプログラムを作りましょう。

ヒント

FlaskのQuickstartにある、Rendering Templatesの節を参考にして作成します。

Rendering Templates -- Quickstart — Flask Documentation

回答例

02_multiplication_with_html.py

import random

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route('/')
def index():
    a = random.randrange(1, 10)
    b = random.randrange(1, 10)
    return render_template('02.html', a=a, b=b)

templates/02.html

<!DOCTYPE html>
<html>
  <head>
    <title>Calculation Game</title>
  </head>
  <body>
    <h1>Calculation Game</h1>
    <p>{{ a }} * {{ b }} = {{ a * b }}</p>
    <p><a href="/">New Game</a></p>
  </body>
</html>

実行例

$ FLASK_APP=02_multiplication_with_html.py FLASK_ENV=development flask run --host=0.0.0.0
 * Serving Flask app "02_multiplication_with_html.py" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 867-383-452
127.0.0.1 - - [23/Aug/2019 06:12:36] "GET / HTTP/1.1" 200 -

課題7-3 入力フォームの作成

指示

1から9の範囲でランダムに選ばれた数を使った掛け算をユーザーに問題として出し、ユーザーが入力するフォームを表示するプログラムを作りましょう。

回答例

03_multiplication_with_form.py

import random

from flask import Flask
from flask import render_template

app = Flask(__name__)


@app.route('/')
def index():
    a = random.randrange(1, 10)
    b = random.randrange(1, 10)
    return render_template('03.html', a=a, b=b)

templates/03.html

<!DOCTYPE html>
<html>
  <head>
    <title>Calculation Game</title>
  </head>
  <body>
    <h1>Calculation Game</h1>
    <form method="POST">
      <input type="hidden" name="a" value="{{ a }}">
      <input type="hidden" name="b" value="{{ b }}">
      <p>{{ a }} * {{ b }} = <input type="text" name="answer"></p>
    </form>
    <p><a href="/">New Game</a></p>
  </body>
</html>

実行例

$ FLASK_APP=03_multiplication_with_form.py FLASK_ENV=development flask run --host=0.0.0.0
 * Serving Flask app "03_multiplication_with_form.py" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 867-383-452
127.0.0.1 - - [23/Aug/2019 06:19:07] "GET / HTTP/1.1" 200 -

課題7-4 掛け算ゲームWeb版

指示

1から9の範囲でランダムに選ばれた数を使った掛け算をユーザーに問題として出し、ユーザーが入力した結果の判定結果を表示するWebアプリケーションを作りましょう。

ヒント

FlaskのQuickstartにある、HTTP Methodsの節を参考にして作成します。

HTTP Methods -- Quickstart — Flask Documentation

回答例

04_calculation_game.py

import random

from flask import Flask
from flask import render_template
from flask import request

app = Flask(__name__)


@app.route('/', methods=['GET'])
def question():
    a = random.randrange(1, 10)
    b = random.randrange(1, 10)
    return render_template('04_question.html', a=a, b=b)


@app.route('/', methods=['POST'])
def answer():
    a = int(request.form['a'])
    b = int(request.form['b'])
    answer = request.form['answer']
    if answer.isdigit() and int(answer) == a * b:
        message = 'Good job!'
    else:
        message = 'Oops!'
    return render_template(
        '04_answer.html', a=a, b=b, answer=answer, message=message)

templates/04_question.html

<!DOCTYPE html>
<html>
  <head>
    <title>Calculation Game</title>
  </head>
  <body>
    <h1>Calculation Game</h1>
    <form method="POST">
      <input type="hidden" name="a" value="{{ a }}">
      <input type="hidden" name="b" value="{{ b }}">
      <p>{{ a }} * {{ b }} = <input type="text" name="answer"></p>
    </form>
    <p><a href="/">New Game</a></p>
  </body>
</html>

templates/04_answer.html

<!DOCTYPE html>
<html>
  <head>
    <title>Calculation Game</title>
  </head>
  <body>
    <h1>Calculation Game</h1>
    <p>{{ a }} * {{ b }} = {{ answer }}</p>
    <p>{{ message }}</p>
    <p><a href="/">New Game</a></p>
  </body>
</html>

実行例

$ FLASK_APP=04_calculation_game.py FLASK_ENV=development flask run --host=0.0.0.0
 * Serving Flask app "04_calculation_game.py" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 867-383-452
127.0.0.1 - - [23/Aug/2019 06:26:18] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [23/Aug/2019 06:26:37] "POST / HTTP/1.1" 200 -

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up