-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquestion.html
92 lines (82 loc) · 3.76 KB
/
question.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
<link rel="stylesheet" href="questionstyle.css">
<title>'오늘의 쉼표'</title>
<style>
body {
background-image: url('./img/background.jpg');
background-size: 390px 844px;
background-repeat: no-repeat;
width: 390px;
}
</style>
</head>
<body>
<article class="q_title">
<h2>'오늘의 쉼표'</h2>
</article>
<div id="sun"></div>
<article class="question">
<h2 id="title" class="text-center mt-5">"오늘 기분은 어떤가요?"</h2>
<div class="mb-3">
<textarea class="form-control" id="textarea_answer" name="answer" rows="3"></textarea>
</div>
<div id="feelingbox">
<button class="feeling" id="bad" value="bad"></button>
<button class="feeling" id="good" value="good"></button>
<button class="feeling" id="happy" value="happy"></button>
<p id="clicked_feeling"></p>
</div>
<button class="next_btn" onclick="next()">다음으로</button>
</article>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script>
var num = 2;
var q = {
1: {"title": '"오늘 기분은 어떤가요?"'},
2: {"title": '"오늘 가장 기뻤던 일은<br/>무엇인가요?"'},
3: {"title": '"오늘 가장 보람찼던 일은<br/>무엇인가요?"'},
4: {"title": '"오늘 후회되는 일이<br/>있나요?"'},
5: {"title": '"내일은 무엇을 <br/>하고 싶나요?"'}
}
var clicked_value = "";
$('.feeling').click(function(){
now_clicked = $(this).val();
if (clicked_value != "") {
txt = "#" + clicked_value;
$(txt).css({"background-color": "rgba(255, 255, 255, 0)"});
}
$(this).css("background-color", "#FFC480");
$('#clicked_feeling').html(now_clicked);
clicked_value = now_clicked;
})
function next() {
if (num == 6) {
$(".question").hide();
$("#textarea_answer").hide();
$(".result").show();
// 오늘의 쉼표 분석
location.href = 'result.html';
} else {
$("#title").html(q[num]["title"]);
$("#sun").css({'left' : 'calc(269px+'+num+'px)', 'top' : 'calc(43px + 167/5*'+num+'px)'})
var inputValue = $("#textarea_answer").val();
$("#"+clicked_value).css({"background-color": "rgba(255, 255, 255, 0)"});
$('#clicked_feeling').html("");
clicked_value = "";
console.log(inputValue)
$("#textarea_answer").val('');
num++;
}
}
</script>
</body>
</html>