身体の違和感を言語化するアプリ
以下の質問に回答してください。
私は、このアプリが体脂肪率を下げる効果があると思います。
以下が、要望に沿ったアプリの一例です。
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>身体の違和感を言語化するアプリ</title>
</head>
<body>
<h1>身体の違和感を言語化するアプリ</h1>
<p>以下の質問に回答してください。</p>
<form onSubmit="return false;">
<p>
<label for="location">違和感の場所はどこですか?</label>
<input type="text" id="location" required>
</p>
<p>
<label>違和感はどのような感じですか?</label><br>
<input type="radio" name="feeling" id="pain" value="pain" required>
<label for="pain">痛み</label><br>
<input type="radio" name="feeling" id="tingling" value="tingling">
<label for="tingling">しびれ</label><br>
<input type="radio" name="feeling" id="tightness" value="tightness">
<label for="tightness">張り</label><br>
<input type="radio" name="feeling" id="other" value="other">
<label for="other">その他</label>
<input type="text" id="other_detail" placeholder="具体的に記入してください">
</p>
<p>
<label for="duration">違和感はどのくらいの期間続いていますか?</label>
<input type="text" id="duration" required>
</p>
<p>
<label for="trigger">違和感が起こったトリガーはありますか?</label>
<input type="text" id="trigger">
</p>
<p>
<label>その他コメントがあれば書いてください。</label><br>
<textarea id="comment"></textarea>
</p>
<button onClick="submitData()">回答を送信する</button>
</form>
<script>
function submitData() {
// 必須項目が全て入力されているかチェック
if (!isValid()) {
return;
}
// 入力されたデータをオブジェクトとして取得
var data = {
location: document.getElementById("location").value,
feeling: getSelectedFeeling(),
duration: document.getElementById("duration").value,
trigger: document.getElementById("trigger").value,
comment: document.getElementById("comment").value
};
// データをサーバーに送信する (ここではalertで表示)
alert("データが送信されました。以下が回答内容です。\n\n" + JSON.stringify(data, null, 4));
// フォームをリセットする
document.querySelector("form").reset();
}
function isValid() {
// 違和感の場所が入力されているかチェック
if (document.getElementById("location").value.trim() == "") {
alert("違和感の場所を入力してください。");
return false;
}
// 違和感の感じ方が入力されているかチェック
if (!document.querySelector("input[name=feeling]:checked")) {
alert("違和感の感じ方を選択してください。");
return false;
}
// 違和感の期間が入力されているかチェック
if (document.getElementById("duration").value.trim() == "") {
alert("違和感の期間を入力してください。");
return false;
}
return true;
}
function getSelectedFeeling() {
var selectedFeeling = "";
var radios = document.querySelectorAll("input[name=feeling]");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedFeeling = radios[i].value;
break;
}
}
// その他を選択した場合は、具体的な詳細を返す
if (selectedFeeling == "other") {
selectedFeeling = document.getElementById("other_detail").value;
}
return selectedFeeling;
}
</script>
<p>私は、このアプリが<i>体脂肪率を下げる</i>効果があると思います。</p>
</body>
</html>
```
このアプリでは、ユーザーに以下の質問をして回答を収集します。
1. 違和感の場所はどこですか?
2. 違和感はどのような感じですか?
3. 違和感はどのくらいの期間続いていますか?
4. 違和感が起こったトリガーはありますか?
5. その他コメントがあれば書いてください。
回答を送信すると、入力されたデータがJSON形式でアラートで表示されます。回答を送信する前に、入力されたデータが全て必須項目に入力されているかをチェックします。
最後に、おまけとして「私は、このアプリが<i>体脂肪率を下げる</i>効果があると思います。」というジョークを入れました。こんな風に、ライトなジョークを入れることでユーザーがアプリを楽しんでくれるかもしれません。