ホーム / HTML /

糖尿病のチェックツールを作りました。

2022年4月10日日曜日

HTML

糖尿病のチェックツールを作りました。

それをこのブログに埋め込もうとしましたが、なんと、できませんでした。
なのでHTMLコードかいておくので、個人で入力して保存してください。
(勿論.htmlで保存)
<!DOCTYPE html>
<html>
<head>
	<title>糖尿病危険度チェック</title>
</head>
<body>
	<center><h1 id ="titleA">あなたの糖尿病の危険度をチェックします</h1></center>
	<center><p id ="p2">以下の質問にこたえてください。</p><p id="question_num"></p></center>
	<center><h2 id="question_text">甘いものが好きで、間食をよくとる</h2><br>
	<a href="javascript:Yes();" class="btn btn--orange" id="yes_button">はい</a>　
	<a href="javascript:No();" class="btn btn--orange" id="no_button">いいえ</a></center>
</body>
<script type="text/javascript">
	var elm = document.getElementById('question_text');
	var ttt = document.getElementById('titleA')
	var num = 0;
	var yes_cnt = 0;
	var no_cnt = 0;
	var list = ["甘いものが好きで、間食をよくとる",
	"運動不足だと思う。",
	"外食をよくする。",
	"40歳以上である。",
	"友達や家族のなかに糖尿病の人がいる。",
	"傷が治りにくい。",
	"最近、のどが乾きやすいと思う。",
	"血圧が高い。"]
	console.log('_3nen5kumi[3]:' + list[3]);
	/*elm.textContent = '甘いものが好きで、間食をよくとる';*/
	function Yes(){
		yes_cnt += 1;
		nextq()
	}
	function No(){
		no_cnt += 1;
		nextq()
	}
	function nextq(){
		num += 1;
		text = list[num]
		if(text == null){
			elm.textContent = "エラー。再読み込みしてください。";
			ttt.textContent = "結果発表";
			document.getElementById("p2").style.visibility ="hidden";
			document.getElementById("yes_button").style.display ="none";
			document.getElementById("no_button").style.display ="none";
			result();
		} else {
		console.log(text);
		elm.textContent = text;
	}
	}
	function result(){
		if (yes_cnt > 6){
			elm.textContent = "あなたはもう糖尿病になっていてもおかしくありません。\n病院に行ってみましょう。"
			elm.style.background = '#CC3333';
		}　else if (yes_cnt > 5 && yes_cnt <= 7) {
			elm.textContent = "結構危険です。気になる症状があれば病院にいきましょう。"
			elm.style.background = '#FF4F02';
		} else if (yes_cnt > 2 && yes_cnt <= 5) {
			elm.style.background = '#FFFF33';
			elm.textContent = "そろそろ気を付けましょう。油断していると糖尿病になってしまいます。"
		} else if (yes_cnt > 0 && yes_cnt <= 2) {
			elm.textContent = "まぁ安全です。この調子で健康な生活を送ってください。"
			elm.style.background = '#00BB00';
		} else if (yes_cnt == 0){
			elm.textContent = "結構安全です。この調子で健康な生活を送ってください。"
			elm.style.background = '#4DF9B9';
		}
	}
</script>
<style type="text/css">
	/*まずはお決まりのボックスサイズ算出をborer-boxに */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;/*rem算出をしやすくするために*/
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}
.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}
</style>
</html>
スクリーンショット：

ページ

▼

QooQ