それをこのブログに埋め込もうとしましたが、なんと、できませんでした。
なので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>
スクリーンショット：
0 件のコメント:
コメントを投稿