なでしこさんで騙しスイッチ

前略
今日も元気に雑プログラムで繋ぐよ。

今回やったこと

なでしこで、昔なんかで見たオルタネイトのプッシュスイッチ3個と電球・電源を直列に繋いでちょっとしたトリックをするやつを再現する。

まず、各スイッチが全てオフの状態で装置を準備する。
それぞれのスイッチを1回ずつ押していくと、3個目のスイッチを押したときに電球が点灯する。

その後、スイッチを逆の順番でもう1回ずつ押していく。すると、最初の (この前のステップで3番目に押した) スイッチを押すと電球が消灯し、残りの2個のスイッチを押しても電球は消灯したままである。

そして、被験者に「どのスイッチを押せば電球が点灯するでしょう？」と聞き、実際にそのスイッチを押させる。
被験者が、これまでのデモで押すと電球の点灯状態が切り替わったスイッチを押せば点灯すると思ってくれればしめたもの。
しかし、このとき直列に接続されたスイッチが全てオフなので、どの1個を押しても電球は点灯しないのである。
そして、2番目のスイッチを押してもやっぱり電球は点灯せず、3番目のスイッチを押すとようやく電球が点灯するのである。

プログラム

騙しスイッチ (プログラム貯蔵庫)

ポイント

部品の配置

●電源ボタン作成とは
  「⏻」のボタン作成。
  それに{
    "文字サイズ": "200%",
    "幅": "2.5em",
    "高さ": "2.5em",
    "border-radius": "1.25em",
  }をDOMスタイル一括設定。
  それを戻す。
ここまで。

同じ形のボタンを並べやすいよう、ボタンを作る関数を用意する。
border-radius を用いて、丸いボタンを作るようにした。

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
電球は「●」のラベル作成。
それの「色」に灰色をDOMスタイル設定。
それの「文字サイズ」に「300%」をDOMスタイル設定。
2回、改行作成。
スイッチ1は電源ボタン作成。
それに1をDOMポケット設定。
スイッチ2は電源ボタン作成。
それに2をDOMポケット設定。
それに{
  "margin-left": "1em",
  "margin-right": "1em",
}をDOMスタイル一括設定。
スイッチ3は電源ボタン作成。
それに4をDOMポケット設定。

電球を表すラベルと、スイッチを表すボタンを用意する。
ボタンには「DOMポケット設定」で ID を割り当て、後で識別しやすいようにした。

スイッチの切り替え処理

スイッチ状態は0。

各スイッチの状態を表す変数を用意する。
それぞれのスイッチを、ビットに割り当てる。

●スイッチ切替とは
  対象のDOMポケット取得。
  スイッチ状態はスイッチ状態とそれのXOR。
  もし、スイッチ状態が7ならば
    電球に「☀」をDOMテキスト設定。
    電球の「色」に金色をDOMスタイル設定。
  違えば
    電球に「●」をDOMテキスト設定。
    電球の「色」に灰色をDOMスタイル設定。
  ここまで。
ここまで。

「DOMポケット取得」で押されたボタンに割り当てられた ID を取得し、「XOR」を用いてスイッチを切り替える。

そして、全てのスイッチがオンならば電球を点灯状態に、そうでなければ電球を消灯状態にする。

{関数}スイッチ切替でスイッチ1をクリックした時。
{関数}スイッチ切替でスイッチ2をクリックした時。
{関数}スイッチ切替でスイッチ3をクリックした時。

それぞれのボタンにイベントハンドラを設定し、ボタンを押すとスイッチが切り替わるようにする。

おわりに

なでしこさんで、昔見たプッシュスイッチでちょっとしたトリックをするやつを再現できた。

被験者、見つかるといいね。