質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

JavaScript 診断テストをつくりたい。

tiki-
tiki-

総合スコア0

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

28閲覧

投稿2019/06/17 11:20

編集2022/01/12 10:58

前提・実現したいこと

Javascriptを使って性格診断テストを作りたい。

まだ完成ではなく
『複数クリックしても最後のものだけ色を付けるようにする。』
『入力したものをデータベースに取り込む』
という所のイメージがついていません。

特にさわったばかりで、JavaScriptで選択したデータはデータベースにそもそも取り込めるのかもわかりません。どういった関数でプログラムを作っていけるんでしょうか?
また、最後のものだけに色を付けるやり方も今の
作るにあたってのヒントをくれたら嬉しいです。

該当のソースコード

JavaScript

'use strict'; { const question = document.getElementById('question'); //constで値を変えないものとして代入 const btn = document.getElementById('btn'); //getElementById指定したIDに会ったドキュメントを取得 const choices = document.getElementById('choices'); // const quizSet = [ {q: 'What is A?', c: ['A0', 'A1', 'A2']}, {q: 'What is B?', c: ['B0', 'B1', 'B2']}, {q: 'What is D?', c: ['C0', 'C1', 'C2']}, {q: 'What is E?', c: ['C0', 'C1', 'C2']}, {q: 'What is F?', c: ['C0', 'C1', 'C2']}, {q: 'What is G?', c: ['C0', 'C1', 'C2']}, {q: 'What is H?', c: ['C0', 'C1', 'C2']}, {q: 'What is I?', c: ['C0', 'C1', 'C2']}, {q: 'What is J?', c: ['C0', 'C1', 'C2']}, ]; let currentNum = 0; let isAnswered; function shuffle(arr) { return arr; } function checkAnswer(li) { if(isAnswered){ return; } li.classList.add('correct'); btn.classList.remove('disabled'); } function setQuiz() { isAnswered = false; question.textContent = quizSet[currentNum].q; while (choices.firstChild) { choices.removeChild(choices.firstChild); } const shuffledChoices = shuffle([...quizSet[currentNum].c]); shuffledChoices.forEach(choice => { //アロー関数? const li = document.createElement('li'); li.textContent = choice; li.addEventListener('click', () => { checkAnswer(li); }); choices.appendChild(li); }); } setQuiz(); btn.addEventListener('click', () => { currentNum++; setQuiz(); }); }

HTML

<div class ="container2"> <p id="question"></p> <ul id="choices"></ul> <div id="btn" class="disabled">Next</div> </div>

CSS

/* 診断テスト*/ .container2 { width: 400px; margin: 8px auto; background: #fff; border-radius: 4px; padding: 16px; position: relative; } #question{ margin-bottom: 16px; font-weight: bold; } #choices { list-style: none; padding: 0; margin-bottom: 16px; } #choices li{ border: 1px solid #ccc; border-radius: 4px; padding: 10px; margin-bottom: 10px; cursor: pointer; } #choices li:hover { background: #f8f8f8; } #choices li.correct{ background: #d4edda; border-color: #c3e6cd; color: #155724; font-weight: bold; } #btn{ background: #3498db; padding: 8px; border-radius: 4px; cursor: pointer; text-align: center; color: #fff; box-shadow: 0 4px 0 #2880b9; } #btn.disabled{ background: #ccc; box-shadow: 0 4px 0 #bbb; opacity: 0.7; }

試したこと

サンプルやテキストを参考に少しいじくって形は完成ではないですが、一応作れました。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

papinianus
papinianus

2019/06/18 09:11

私に回答依頼なさったのはGoogleフォームでやりたいということですか?
m.ts10806
m.ts10806

2019/06/20 00:18

>一応作れました。 自身で具体的に回答にして解決済みにしておいてください。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。