🐷
Amazon Q CLIで、AWSサービスのPrefixがAWSかAmazonかを答えるクイズを作った
作ったもの
AWSのサービスで、前にAWSがつくのか、Amazonがつくのかがよく分からないのでクイズで覚えましょう、という試みです。
こちらです↓
使い方
トップページ。BASIC(20問)かADVANCED(200問以上)かを選んでスタートします。
設問のページです。
問き終わると結果が出ます。
環境
Ubuntu 22.04
作成してもらう
Amazon Q CLIインストールはこちらを見ました。
プロンプト
Webブラウザで動作するクイズを作りたいです。
以下の仕様やサンプルデータに基づいて、そのまま公開できるようプログラム一式を実装してくれますか？
見た目はおしゃれな感じでお願いします。
# ユーザーの操作の流れ
1. スタートボタンが押されると、クイズが始まり、タイムがカウントアップされる。00:00の秒単位
2. AWSのサービス名のPrefixがAWSかAmazonかを選ぶクイズが表示される
3. 問題がランダムで表示される
4. 最後に正解数、自身の回答、と答えが表示される。正答は緑っぽく、誤答は赤っぽく
5. Top画面へ戻る
# コース
questionsフォルダに問題を作るための回答を記述したテキストファイルを配置します
# 留意事項
- なお、github.ioで公開したいのでhtml, css, jsを用いたシンプルな構成にしてください。
# 問題を定義したファイルのサンプル
まずはサンプルとして、回答はこれだけにしてください。
AWS Amplify
AWS App Runner
Amazon AppFlow
AWS AppSync
AWS Audit Manager
Amazon Augmented AI
これで十分動くものが出来ていました。
フォーマットやモード切り替えを追加したりして完成しました。
Amazon Q CLIで依頼したけどできなかったこと
- 確認用のPythonサーバを作ってくれるのですが、再起動しましたと言っているができておらず、手動でやる必要がありました。
python3 -m http.server 8000
- CSSでハマる
hoverとリングの挙動がPCとスマートフォンで異なっていて、それが解消できず結局どちらもナシにしました。
まとめ
- かんたんに作ってくれるのでいいですね。私が微調整で変えた程度でほぼAmazon Qがやってくれました
- 自分で解いてみると全く正答できないことが判明しました。スタンドアロンなものはAmazonらしいですが・・・
- 見た目はおしゃれな感じで、というリクエストをするとAmazonQのカラー調になるようですね
参考にしたもの
プロンプトやGitHub Actionsでデプロイする部分を使わせていただきました。
Discussion