-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-vue.html
139 lines (136 loc) · 6.2 KB
/
index-vue.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.hover {
cursor: pointer
}
.answerActive, .hover:hover {
background-color: #EEE
}
</style>
</head>
<body>
<div id="app">
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">공대생의 연애타입</h1>
<p class="lead">공대생인 당신! 본인의 연애타입이 궁금하지 않으신가요?</p>
</div>
</div>
<div class="container" id="content">
<div class="card" id="card-`+i+`">
<div class="card-body">
<div class="progress mb-3">
<div class="progress-bar" v-bind:style="{width: Math.floor((page+1)/pageNum*100)+'%'}" role="progressbar" aria-valuemin="0" aria-valuemax="100">{{ page+1 }} / {{ pageNum }}</div>
</div>
<h5 class="card-title">{{ questions[page] }}</h5>
<div class="card my-4">
<ul class="list-group list-group-flush">
<li class="list-group-item hover" v-bind:class="{ answerActive: answerActive(i) }" v-on:click="select(i)" v-for="(answer, i) in answers[page]">{{ i+1 }}. {{ answer }}</li>
</ul>
</div>
<button v-if="page != 0" v-on:click="prev" class="btn btn-outline-info">이전 질문</button>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
form: [],
page: 0,
pageNum: 3, // 페이지 갯수임 question.length
questions: [
'친구의 소개로 카페에서 처음 만난 이성에게 호감이 생겨 무언가 대화를 이어가려는 시도를 한다. 리드한 대화주제는?',
'거리를 거닐다 마주친 이성에게 첫눈에 반했다. 어떻게 할 것인가?',
'ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ',
],
answers: [
['오늘 공부한 것들과 학술적 이야기', '최근 학교근처를 돌아다니는 고양이 이야기', '다른답지', '다른답지2'],
['자신감 있게 말을 건다', '수줍게 말을 건다', '그냥 지나간다', '그냥 쳐다보면서 지나간다'],
['ㅠㅠㅠㅠㅠㅠㅠㅠ', '최근 학교근처를 돌아다니는 고양이 이야기', '다른답지', '다른답지2'],
]
},
methods: {
prev: function() {
if (this.page != 0) {
this.page = this.page - 1
this.form.pop()
}
},
select: function(i) {
this.form.push(i)
console.log(this.form.length)
console.log(this.questions.length)
if (this.form.lenght == this.questions.lenght) {
console.log(this.form)
// window.location.href = 'report.html'
}else {
this.page = this.page + 1
}
},
answerActive: function(i) {
return this.form[this.page] == i ? true : false
},
submit: function() {
console.log(this.form)
// window.location.href = 'report.html'
}
},
computed: {
pagePer: function(val){
return Math.floor(this.page/this.pageNum)*100
},
}
})
// function prev(i){
// if (i != 0){
// $('#card-'+i).hide()
// $('#card-'+(i-1)).show()
// }
// }
// function next(i){
// $('#card-'+i).hide()
// if (data.question.length-1 == i){
// window.location.href = 'report.html'
// }
// $('#card-'+(i+1)).show()
// }
//
// for(var i=0;i<data.question.length;i++) {
// var per = Math.floor(i / data.question.length * 100);
// var card = `
// <div class="card" id="card-`+i+`">
// <div class="card-body">
// <div class="progress mb-3">
// <div class="progress-bar" role="progressbar" style="width: `+per+`%" aria-valuenow="`+per+`" aria-valuemin="0" aria-valuemax="100">`+per+`%</div>
// </div>
// <h5 class="card-title">`+data.question[i]+`</h5>
// <div class="card my-4">
// <ul class="list-group list-group-flush">
// <li class="list-group-item hover">1. `+data.answer[i][0]+`</li>
// <li class="list-group-item hover">2. `+data.answer[i][1]+`</li>
// <li class="list-group-item hover">3. `+data.answer[i][2]+`</li>
// <li class="list-group-item hover">4. `+data.answer[i][3]+`</li>
// </ul>
// </div>
//
// `+(i==0?``:`<button onclick="prev(`+i+`)" class="btn btn-info">이전 질문</button>`)+`
// <button onclick="next(`+i+`)" class="btn btn-success">`+((data.question.length-1)==i?`설문 완료!`:`다음 질문`)+`</button>
// </div>
// </div>
// `;
// $('#content').append(card)
// $('#card-'+i).hide()
// }
// $('#card-0').show()
</script>
</body>
</html>