Shellで実行されるコードを、tkinter ボタンに割り当て実行しようとしたのですが、うまくいきません

Question

下記、プログラムをShellで実行すると問題なく動きます。内容は、
➀、質問に対して、OKなら表示されているランダムな数字を入力して、OKボタンを押す
➁、同じ数字が入力されていれば、リスト内の次の質問と次の(ランダムな)数字が表示される
➂、異なる数字が入力されれば、再度、同じ質問と先ほどとは異なる数字が表示される

import random

q=["Aでいいですか？","Bでもいいですか？","Cでもいいですよね？"]
q.append("Dも追加していいですか？")

g=len(q)
n=0

while True :
    print(q[n])
    a=random.randint(0,100)
    print(a)
    b=int(input("""OKなら同じ数字を入力してください
→"""))
    
    if a!=b:
        continue
    else:
        n=(n+1)% g

実行しますとShellで下記のように表示されます
～・～・～・～・～・～・～・～・～・～・～・～・～・～・
Aでいいですか？
8
OKなら同じ数字を入力してください
→8
Bでもいいですか？
55
OKなら同じ数字を入力してください
→55
Cでもいいですよね？
19
OKなら同じ数字を入力してください
→19
Dも追加していいですか？
21
OKなら同じ数字を入力してください
→21
Aでいいですか？
～・～・～・～・～・～・～・～・～・～・～・～・～・～・

これをtkinterを使って再現したく、ネットにあった構文を拝借して、上記のコードを各所の思う所に当て込んで下記のように実行すると、
「line 45, in <module>
if a != c:
NameError: name 'c' is not defined」
と、エラーになります。

import tkinter as tk
import random


# ウィンドウを作成 
win = tk.Tk()
win.title("質問")
win.geometry("500x250")

# 部品を作成 
label1 = tk.Label(win, text="----")
label1.pack()

label2 = tk.Label(win, text="----")
label2.pack()

label3 = tk.Label(win, text="OKなら同じ数字を入力してokを押してください")
label3.pack()

text1 = tk.Entry(win)
text1.insert(tk.END, '')
text1.pack()

# 作業を作製
q=["Aでいいですか？","Bでもいいですか？","Cでもいいですよね？"]
q.append("Dも追加していいですか？")

g=len(q)
n=0

while True :
    label1["text"]=q[n]
    a=random.randint(0,100)
    label2["text"]=a

    def ok_click():
        c= int(text1.get())

    if a != c:
        continue
    else:
        n=(n+1)% g



# ボタンを作成 
okButton = tk.Button(win, text='ok',command=ok_click)
okButton.pack()
   

# ウィンドウを動かす
win.mainloop()

ifの後ろにある、cが定義されていないとの事で、def関数の中にあるｃが受け渡せていないのだと思います
def関数の位置が悪いのかなと思い、

def ok_click():
    while True :
        label1["text"]=q[n]
        a=random.randint(0,100)
        label2["text"]=a
        c= int(text1.get())

    if a != c:
        continue
    else:
        n=(n+1)% g

とすると、エディタ上でcontinueが赤くハイライトされ、SyntaxError「'continue'not properly in loop」が表示されます

●ご教授頂きたいこと
➀、冒頭のShellで実行できるコードを、tkinterで実行できるコード
➁、tkinter内でOKボタンをクリックする以外にも、キーボードの「Enter」ボタンで次の質問に進めるコード
➂、text内に半透明で「ここに数字を入力してください」とデフォルト表示されており、クリックすると消えるコード

欲張ってすみません、どれか一つだけでも結構です
よろしくお願いいたします

Answer 1

クリック1回分の処理をする関数を定義して、呼び出すようにしないといけないです。
もろもろ対応してみました。

import tkinter as tk
import random

# ウィンドウを作成
win = tk.Tk()
win.title("質問")
win.geometry("500x250")

# 部品用変数を用意
question = tk.StringVar()
value = tk.StringVar()
entry = tk.StringVar()

# 質問
q = ["Aでいいですか？", "Bでもいいですか？", "Cでもいいですよね？"]
q.append("Dも追加していいですか？")

# 処理定義
n = 0
question.set(q[n])
value.set(random.randint(0, 100))

def ok_click(event=None):
    if entry.get() == value.get():
        global n
        n = (n + 1) % len(q)
        question.set(q[n])
    entry.set("")
    value.set(random.randint(0, 100))

# 部品を作成
tk.Label(win, textvariable=question).pack()
tk.Label(win, textvariable=value).pack()
tk.Label(win, text="OKなら同じ数字を入力してokを押してください").pack()
text = tk.Entry(win, textvariable=entry)
text.bind('<Return>', ok_click)
text.pack()
tk.Button(win, text='ok', command=ok_click).pack()

# ウィンドウイベント処理開始
win.mainloop()

Comments

[swing]

早々にご回答ありがとうございます
書いて頂いたコードをコピペして実行すると、作りたかったGUIを得れました
ありがとうございます
そして、すごくシンプルで美しいコードですね
必要最低限で書いてあるのでしょうね
初めて見たキーワードもあり、これから1行づつコピペしてどのコードがどの仕事をしているのかを勉強致します
ありがとうございました

Answer 2

(1) (2) のみの回答です。

while ループを廃止し、以下のようにします。

def next_question():
    global a
    label1["text"] = q[n]
    label2["text"] = a = random.randint(0,100)
    text1.delete(0, tk.END)

def ok_click(event=None):
    global c, n
    c = int(text1.get())
    if a != c:
        win.destroy()
    else:
        n = (n+1) % g
        next_question()

next_question()

text1.bind("<Return>", ok_click)

コンソールのプログラムにGUIを導入するにあたり、
「イベント駆動」という事を意識する必要があります。

通常のプログラムであれば、プログラムは上から下へ流れるように実行されますが、
Tkinter 等のGUIを使ったプログラムでは、
メインのループはマウスのイベントや描画を更新する処理(mainloop)になる為、
メインスレッドでは他のメインループを持つことはできません。
(描画や入力等の操作が出来なくなりウィンドウが固まります)

GUIプログラミングで、どのようにプログラムを構成するかというと、
入力があった時、ボタンが押された時等をトリガーに、
何かイベントが起きた時に呼ばれる関数を登録 (この場合 ok_click) しておき、
そこでイベントが起こった場合の処理、入力がの判定や次の質問へ進む処理を行います。

---

キーボードの「Enter」ボタンで次の質問に進めるコード

text1.bind("<Return>", ok_click)

Enter キーが押された時に、ok_click関数が呼ばれるように登録。

※ "<Enter>" ではありません。<Enter> もありますが、
カーソルが入った時・離れた時のイベントに<Enter>, <Leave>が使われてます。

bindで登録した場合、関数にはイベントオブジェクトが渡されるので、
引数が異なります。

ok_click() # <-- ボタンが押された時
ok_click(event) # <-- Enter キーが押された時

引数なしの呼び出し両方に対応する為、デフォルト引数を設定してます。(変更点)

def ok_click(event=None):
    ...

---

(3) に関しては、Tkinter のEnter 標準の機能にはないので、
自分で実装するかコードを借用する必要があります。

「Placeholder」 で検索すると幾つかサンプルコードが見つかります。

• How to add placeholders to Tkinter Entry fields
• tkinter-entry-with-placeholder

Comments

[swing]

早々にご回答ありがとうございます
Sellで動きさえすれば、GUIで表現するのは、割り当てるぐらいに考えていたのですが、
書き方も変わってしまうのですね
ご指摘頂いておりますように、何度もウィンドウが固まりました
（自分で書いたモノがちゃんとフリーズするというちょっとした感動がありましたが。。）
ご教授頂いた内容ですと、GUIにて作成する際はwhile文は使えなく、トリガー→処理を意識して書くのですね。➁、③も回答頂き、ありがとうございます。「Placeholder」実装できるようにします。
ありがとうございました。