Skip to content

Commit e7559cc

Browse files
logustralogustra
committed
add project 5
1 parent 8ab1926 commit e7559cc

File tree

7 files changed

+274
-9
lines changed

7 files changed

+274
-9
lines changed

‎public/css/main.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/js/simple-quiz-app.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎simple-quiz-app.html

Lines changed: 91 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,99 @@
2828
<![endif]-->
2929
</head>
3030

31-
<body class="simple-quiz-app">
31+
<body>
3232

3333
<main>
34-
<div class="container">
35-
<h1>Simple Quiz App</h1>
36-
34+
<div class="simple-quiz-app">
35+
<div class="container">
36+
<div class="item panel-0" data-panel="0">
37+
<div class="wrapper active">
38+
<h1>SQuiz</h1>
39+
<button class="start-quiz btn btn-success text-capitalize" data-next="1">start quiz</button>
40+
</div>
41+
</div>
42+
<!-- .item -->
43+
44+
<div class="item panel-1" data-panel="1">
45+
<div class="wrapper">
46+
<h1>How do you think about this project?</h1>
47+
48+
<div class="options">
49+
<p>Nice</p>
50+
<p>Flat</p>
51+
<p>Bad</p>
52+
</div>
53+
<!-- .options -->
54+
55+
<button class="btn btn-success btn-next text-capitalize" data-next="2">next question</button>
56+
</div>
57+
</div>
58+
<!-- .item -->
59+
60+
<div class="item panel-2" data-panel="2">
61+
<div class="wrapper">
62+
<h1>How do you think me?</h1>
63+
64+
<div class="options">
65+
<p>Handsome</p>
66+
<p>Strange</p>
67+
<p>Ugly</p>
68+
</div>
69+
<!-- .options -->
70+
71+
<button class="btn btn-success btn-next text-capitalize" data-next="3">next question</button>
72+
</div>
73+
</div>
74+
<!-- .item -->
75+
76+
<div class="item panel-3" data-panel="3">
77+
<div class="wrapper">
78+
<h1>What programming language do you like?</h1>
79+
80+
<div class="options">
81+
<p>Javascript</p>
82+
<p>Ruby</p>
83+
<p>PHP</p>
84+
</div>
85+
<!-- .options -->
86+
87+
<button class="btn btn-success btn-next text-capitalize" data-next="4">next question</button>
88+
</div>
89+
</div>
90+
<!-- .item -->
91+
92+
<div class="item panel-4" data-panel="4">
93+
<div class="wrapper">
94+
<h1>How many stars will you give for this project?</h1>
95+
96+
<div class="options">
97+
<p>5 Stars</p>
98+
<p>3 Stars</p>
99+
<p>1 Star</p>
100+
</div>
101+
<!-- .options -->
102+
103+
<button class="btn btn-success btn-next text-capitalize" data-next="5">next question</button>
104+
</div>
105+
</div>
106+
<!-- .item -->
107+
108+
<div class="item panel-5" data-panel="5">
109+
<div class="wrapper">
110+
<h1>Thank you for participating :)</h1>
111+
</div>
112+
</div>
113+
<!-- .item -->
114+
115+
<div class="error">
116+
<p>Please make a selection</p>
117+
</div>
118+
<!-- .error -->
119+
120+
</div>
121+
<!-- .container -->
37122
</div>
38-
<!-- .container -->
123+
<!-- .simple-quiz-app -->
39124
</main>
40125

41126
<!-- Jquery -->
@@ -45,7 +130,7 @@ <h1>Simple Quiz App</h1>
45130
<script src="public/js/jquery-ui.min.js"></script>
46131

47132
<!-- Tabs Widget -->
48-
<script src="public/js/overlay-widget.js"></script>
133+
<script src="public/js/simple-quiz-app.js"></script>
49134
</body>
50135

51136
</html>

‎src/js/simple-quiz-app.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
( function () {
2+
3+
this.data = {
4+
results : []
5+
};
6+
7+
this.startQuiz = function () {
8+
9+
$('.start-quiz').on('click', function () {
10+
showPanel(1);
11+
nextQuestion();
12+
});
13+
};
14+
15+
function showPanel(number) {
16+
$('div[data-panel="'+ (number - 1 ) +'"]').find('.wrapper').animate({
17+
left: '-=100px',
18+
opacity: 0,
19+
}, 300, function () {
20+
$(this).hide();
21+
var next = $('div[data-panel="' + number + '"]');
22+
showNext(next);
23+
});
24+
25+
}
26+
27+
function showNext(next) {
28+
var wrapper = next.find('.wrapper');
29+
wrapper.fadeIn('300', function () {
30+
showOptions(next);
31+
});
32+
}
33+
34+
function showOptions(next) {
35+
var options = next.find('.options p');
36+
var counter = 0;
37+
38+
options.each( function (index, current) {
39+
$(this).delay(counter).animate({
40+
opacity: 1
41+
});
42+
counter += 400;
43+
});
44+
45+
options.on('click', function () {
46+
options.removeClass('active');
47+
$(this).addClass('active');
48+
next.addClass('valid');
49+
});
50+
}
51+
52+
function nextQuestion () {
53+
$('.btn-next').on('click', function () {
54+
var next = $(this).data('next');
55+
if (validate($(this))) {
56+
showPanel(next);
57+
storedData(next);
58+
}
59+
});
60+
}
61+
62+
function validate(panel) {
63+
var parents = panel.parents().eq(1);
64+
if (parents.hasClass('valid')) {
65+
return true;
66+
} else {
67+
$('.error').fadeIn('300', function() {
68+
$(this).fadeOut();
69+
});
70+
}
71+
}
72+
73+
function storedData(panel) {
74+
var answer = $('div[data-panel="'+ (panel - 1) +'"]').find('.options p');
75+
answer.each( function (index, current) {
76+
if($(this).hasClass('active')) {
77+
data.results.push($(this).text());
78+
console.log(data.results);
79+
}
80+
});
81+
}
82+
83+
startQuiz();
84+
})();

‎src/sass/components/_list-projects.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222

2323
h1 {
2424
color: $white;
25+
border: 2px solid $white;
26+
padding: 15px 5px;
2527
}
2628
}// pseudoclass
2729

@@ -32,7 +34,7 @@
3234
font-weight: 300;
3335
letter-spacing: 4px;
3436
line-height: 50px;
35-
margin: 25px 0;
37+
margin: 0;
3638
transition: .5s;
3739
color: $midnight;
3840
}// h1

‎src/sass/components/_simple-quiz-app.scss

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
.simple-quiz-app {
2+
@include bgTintedImg('../images/quiz.jpg', center center, no-repeat, cover, rgba(0, 0, 0, 0.45));
3+
position: fixed;
4+
height: 100%;
5+
width: 100%;
6+
7+
.container {
8+
9+
h1 {
10+
font-weight: 300;
11+
letter-spacing: 4px;
12+
text-align: center;
13+
margin: 25px 0 70px 0;
14+
}// h1
15+
16+
.item {
17+
18+
.wrapper {
19+
position: fixed;
20+
top: 50%;
21+
left: 50%;
22+
transform: translate(-50%, -50%);
23+
width: 30%;
24+
background: $white;
25+
margin: 0 auto;
26+
text-align: center;
27+
border-radius: 10px;
28+
padding: 50px;
29+
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
30+
display: none;
31+
32+
33+
h1 {
34+
margin: 15px 0;
35+
@include font-size(25px);
36+
letter-spacing: 1px;
37+
}// h1
38+
39+
.options {
40+
width: 40%;
41+
height: 120px;
42+
margin: 0 auto;
43+
44+
p {
45+
letter-spacing: 1px;
46+
font-weight: 300;
47+
border: 2px solid transparent;
48+
padding: 2px;
49+
opacity: 0;
50+
border-radius: 50px;
51+
transition: .5s;
52+
cursor: pointer;
53+
54+
&:hover {
55+
background: $smoke;
56+
}// pseudoclass
57+
58+
}// p
59+
60+
p.active {
61+
border: 2px solid $green;
62+
border-radius: 50px;
63+
}// p.active
64+
}// .options
65+
66+
.btn-success {
67+
68+
&:hover,
69+
&:focus {
70+
background: $smoke !important;
71+
}
72+
}// .btn-success
73+
}// .wrapper
74+
75+
.wrapper.active {
76+
display: block;
77+
}
78+
}// .item
79+
80+
.error {
81+
position: fixed;
82+
bottom: 0;
83+
left: 50%;
84+
transform: translate(-50%);
85+
margin-bottom: 25px;
86+
color: $white;
87+
font-weight: 300;
88+
@include font-size(17px);
89+
display: none;
90+
}// .error
91+
}// .container
92+
}// .simple-quiz-app

‎src/sass/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Telegram : @logustra
2222
@import "components/card-slider-widget";
2323
@import "components/images-slider-widget";
2424
@import "components/overlay-widget";
25+
@import "components/simple-quiz-app";
2526
@import "components/helper";
2627

2728
// layout

0 commit comments

Comments
 (0)