✨ 202608 初学者用クイズ 勉強会資料

[nabe1005]

No description provided.

[nabe1005]

初心者コース

• JSメインで、クイズの方向で進める
• Claude資料を改造する
• HTMLはアトリビュートは削って、1問目が決めうちにされているところからスタート
• idやclassを指定しながら、JSを書き進めていくイメージ
• CSSは取り扱わない

[nabe1005]

Chapter1はカット

[nabe1005]

Chapter2はもう少ししっかり基礎からJavaScriptの構文を教えたい

[nabe1005]

Chapter1と2の間にJavaScript入門を挟む

• JavaScriptとは？
• 変数宣言、const / let、ダブルクォーテーションで文字列になる
• if / for、比較演算子
• 文字列結合、+で結合できますよ
• 配列・オブジェクト

---

• 初期段階では3択に統一する(N択は応用課題)
• 数値計算と文字列結合をワンラインでやらない

[nabe1005]

Stackblitzを使うよう修正

[nabe1005]

クイズのデフォルト問題を変えてもいいかも？
jig要素を入れたい

[nabe1005]

showQuestion()の中身をさらに分割して、解説するコードと学生に書いてもらうコードを分けたい

[nabe1005]

idだけでなんとかしたい、HTMLのclassを使いたくない

[nabe1005]

4-2のifは応用課題にする方向で調整

[koduno]

8月オンライン開発ゼミ初心者コース向け: 3択クイズ資料を追加しました

概要

8月開催のオンライン開発ゼミ（初心者コース）向けの資料「1から学ぶ JavaScript！ クイズアプリを作ってみよう」を追加します。

• 対象: プログラミング未経験〜初心者の高専生（HTML/CSS 経験は問わない）
• 枠: 3時間。全員が3章（スコアと結果表示）完成を必達ラインとし、4章のオリジナル化と応用課題は早い人向けのバッファ

変更内容

• 2026/quiz/slide.md — スライド一本構成（50枚）。web-intro と同じく、書くコードはすべてスライドに掲載
  • 各節を「動機 → 書く場所 → コード → 動作チェック」の型で統一
  • 既存コードへの書き足し箇所は黄色ハイライト、丸ごと置き換えは明記で区別
  • 冒頭に「スライドの見かた」（記述バッジ・ハイライトの読み方）を追加
• 2026/quiz/completed/ — 講師用の完成版アプリ（スライドのコードと一致）
• 2026/quiz/template/ — StackBlitz テンプレートの元。1問目表示済み・script.js 空・onclick 未記入
  • 配布用: https://stackblitz.com/edit/web-quiz-2026?file=index.html
• engine.mjs — コードブロック内の @@...@@ を <mark> ハイライトに変換する機能を追加（@@ を含まないブロックには無影響。既存資料の見た目は変わりません）

確認方法

pnpm preview 2026/quiz/

（↑ htmlにすると@@のハイライトが聞きますがプレビューだと効かないかも）

レビュー観点

• 通しで見たときの説明の流れ（特に 0章 JavaScript入門 → 1章 の接続）
• 3時間で完走できる分量か
• コードの誤り（completed/ と突き合わせ済みですが念のため）

[takerucam]

LGTMです