Loopコンポーネントを使えば，そこに含まれるコンポーネントを繰り返し実行することができるため，刺激だけを変えて繰り返し呈示など，様々な場面でLoopコンポーネントは活用できます。しかし，時には任意のタイミングでLoopコンポーネントを途中で終了したい場合があります。
単独のコンポーネント単位では，this.end()で終了できます（途中で終了したい ）。しかし，これは当該コンポーネントを終了するだけで，その上位のコンポーネントは終了できません。例えば，Loopコンポーネント（親）にHTML Pageコンポーネント（子）がネストしているという構成の場合，HTML Pageコンポーネント（子）でthis.end()を実行してもそのコンポーネントが終了するだけで，Loopコンポーネント（親）は終了できません。親にあたるコンポーネントを終了したい場合は，this.parent.end()を使いましょう。ただ，実際の運用では，一定の正解率に達したら抜けるなど，条件を満たした際にLoopコンポーネントを終了したい（抜けたい）という場合が大半かと思いますので，このコマンドを条件付きで実行するという運用が必要になります。そのために，Scriptsの「end」で条件判定をして，条件を満たす場合に終了するというプログラムにします。
デモとして，5回ループを繰り返す中で，「Next」ボタンを押すと次の試行，「End」ボタンを押すとループを抜けるというプログラムを作ってみました。繰り返しになりますが，ポイントは，HTML PageコンポーネントのScriptsでEndのタイミングで終了条件を判定しているところです。
#end
if(this.data.response == "end")
{
this.parent.end()
}
今回はクリックするボタンに応じてループを抜けますが，これを任意の正解数以上の際に抜けるという対応も可能でしょう。その場合にはthis.state.variableやwindow.variableなどで試行を跨いで累積の正解数を保存する必要がある点に注意してください。
©2021 Masanori Kobayashi