JSクイズアプリでの画像切り替え難易度選択について

Question

先日学校の課題でJSを使ってのクイズアプリ作成の課題が出されました。その課題でJSを初めて触るので少しご教授お願いします。

環境
windows10
monaca

自分が作りたいクイズアプリについて
自分はYouTuberのチャンネル名当てクイズをやろうと思いYouTuberの知名度によって難易度分けをし、YouTuberの画像を表示しその画像のYouTuberのチャンネル名入力欄に入力された文字が正解か不正解化を判定し、不正解ごとに点数が引かれていくアプリを作ろうと思いました。

問題点
・自分がJS初心者ということもあり、あまりサンプルソースを理解していない
・トップページで難易度選択ボタンを表示させ、クリックすると問題画面へ飛ばす方法が分からない
・問題解答ごとにYouTuberの画像を切り替えする方法が分からない

ついでに聞いておきたいのですが、自分はPHPを学んでいますそこで、PHPとJSをソースコードに一緒に書くことはできるのでしょうか。

ご回答よろしくお願いします。

Answer 1

phpとjavascriptは解釈される場所が違うので一緒に書いても全く問題ありません。
「足し算と引き算を一緒に式に書いていいんですか？」と言っているくらいの初歩的な質問です。
それぞれどういうものなのかもう少し理解したほうがよろしいかと。

「サンプルソースを理解していない」と自分でわかっているのであれば
自分なりに理解してからわからないことなどを質問に来てください。

Answer 2

つい最近まで私も卒制でクイズアプリを作っていた（現在デバッグ中）ので簡単にアドバイスを…

その前に問題点の解答を

自分がJS初心者ということもあり、あまりサンプルソースを理解していない

Monacaというより、OnsenUIに則った書き方を覚えれば後は楽かと思います。
参考リンク Onsen UI 2

トップページで難易度選択ボタンを表示させ、クリックすると問題画面へ飛ばす方法が分からない

ページ遷移の方法はこれを見ればいけます
※素のjsを使うとOnsenUIに則ったjsの書き方がだいぶややこしいので、使ったこと無くてもAngularJS 1を使うのをお勧めします（当方は大変な目にあいました…）
難易度選択ボタンもOnsenUIで用意されているものを使用するといいと思います。
参考リンク ons-navigator
参考リンク OnsenUI CSS List
参考リンク OnsenUI CSS Button

問題解答ごとにYouTuberの画像を切り替えする方法が分からない

javascriptでやる（完全にローカル）場合、Monacaに画像を追加しておき、Youtuberの一覧をjsonファイルやXMLファイルで保存しておく。
それをページ遷移時にif文なり使って画像の出し分けをすればいいと思います。

PHPやっているのであればDBも多少やっている…と思うので割愛しますが、サーバーに画像とDBにYoutuberのテーブルを作っておいてそれをアプリ側からajaxを使ってphp呼び出してコールバックで画像等を受け取ればいいと思います（画像の切り替えはphp側でやることになると思います）。

ついでに聞いておきたいのですが、自分はPHPを学んでいますそこで、PHPとJSをソースコードに一緒に書くことはできるのでしょうか。

出来ますが、それはあくまでphpファイルに<script>要素、要はjsを書けるというだけであり、Monacaにはphpを動作するモジュールは搭載されていません。
要するにphpを使いつつ、Monacaでクイズアプリを作るには別途サーバーが必要になってきます。

根本的なjsの書き方はネットに沢山書かれているのでそこは調べてみてください。

長文失礼しました…