Skip to content

Commit

Permalink
responsive
Browse files Browse the repository at this point in the history 
Added progress bar for small screen to replace circles. Added background image and styled quiz to suit
  • Loading branch information
kombimedia committed Jul 24, 2017
1 parent 10f35ef commit 06dfb69
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 33 deletions.
55 changes: 41 additions & 14 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,17 @@ Grey #EDF0F1

/* Structure
-----------------------------------------------------*/
html{
background: url("../images/background.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
background-color: #000;
margin: 0;
color: #FFF;
font-family: 'Aref Ruqaa';
Expand All @@ -20,7 +29,7 @@ body{
min-width: 300px;
}
.content-box{
background-color: #EDF0F1;
background-color: rgba(237, 240, 241, 0.8);
/*min-height: 182px;*/
color: #000;
padding: 2em 1em;
Expand Down Expand Up @@ -57,6 +66,7 @@ fieldset{
border: none;
}
#progress-container{
display: none;
position: relative;
}
progress {
Expand All @@ -69,7 +79,7 @@ progress {
display: block;
}
progress::-webkit-progress-bar {
background-color: #000;
background-color: transparent;
border-radius: 5px;
}
progress::-webkit-progress-value {
Expand Down Expand Up @@ -119,7 +129,7 @@ progress::-moz-progress-bar {
/* Buttons
-----------------------------------------------------*/
button{
background-color: #1ABC9C;
background-color: rgba(80, 190, 155, 0.9);
color: #FFF;
font-size: .9em;
padding: 1.2em;
Expand All @@ -138,16 +148,10 @@ button:focus{
float: none;
margin-left: 0;
}
/*#prev{
float: left;
}*/
/*#next{
float: right;
}*/
.btn-pag{
float: left;
margin-right: .4em;
background-color: #000;
background-color: transparent;
border: 1px solid #1ABC9C;
}
.btn-pag-invalid{
Expand All @@ -156,13 +160,17 @@ button:focus{
#btn-instructions{
float: left;
}
#calculate-score:hover{
background-color: rgba(80, 190, 155, 0.6);
}

/* Error / success messages
-----------------------------------------------------*/
#signup-error-message{
color: #FF0000;
}
#error-message{
#error-message,
#error-message-pb{
color: #FFFFFF;
margin-bottom: 30px;
}
Expand Down Expand Up @@ -190,11 +198,11 @@ button:focus{
display: inherit;
}
.red{
background-color: #000000;
background-color: transparent;
border: 1px solid #FF0000;
}
.teal{
background-color: #1ABC9C;
background-color: rgba(80, 190, 155, 0.8);
}

/* Fade in animation
Expand Down Expand Up @@ -333,3 +341,22 @@ button:focus{
.fa {
margin-right: 10px;
}

/* Media Queries
-----------------------------------------------------*/
@media only screen and (max-width: 768px) {
#progress-container,
#error-message-pb {
display: block;
}
.progress-circles {
display: none;
}
#calculate-score {
float: left;
clear: left;
}
#next{
float: right;
}
}
Binary file added images/background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 17 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,24 @@ <h3>Great work in taking the next step in achieving your CSS3 goals!</h3>
<div class="fade-in hidden" id="quiz-form">

<!-- Progress and navigation -->
<div class="progress" id="pro-link">
<a href="#" class="col un-answered circle active pulse" id="pro1">1</a>
<a href="#" class="col un-answered circle" id="pro2">2</a>
<a href="#" class="col un-answered circle" id="pro3">3</a>
<a href="#" class="col un-answered circle" id="pro4">4</a>
<a href="#" class="col un-answered circle" id="pro5">5</a>
<a href="#" class="col un-answered circle" id="pro6">6</a>
<a href="#" class="col un-answered circle" id="pro7">7</a>
<a href="#" class="col un-answered circle" id="pro8">8</a>
<a href="#" class="col un-answered circle" id="pro9">9</a>
<a href="#"" class="col un-answered circle" id="pro10">10</a>
<div class="progress-circles">
<div class="progress" id="pro-link">
<a href="#" class="col un-answered circle active pulse" id="pro1">1</a>
<a href="#" class="col un-answered circle" id="pro2">2</a>
<a href="#" class="col un-answered circle" id="pro3">3</a>
<a href="#" class="col un-answered circle" id="pro4">4</a>
<a href="#" class="col un-answered circle" id="pro5">5</a>
<a href="#" class="col un-answered circle" id="pro6">6</a>
<a href="#" class="col un-answered circle" id="pro7">7</a>
<a href="#" class="col un-answered circle" id="pro8">8</a>
<a href="#" class="col un-answered circle" id="pro9">9</a>
<a href="#"" class="col un-answered circle" id="pro10">10</a>
</div>
<div class="clear" id="error-message"></div>
</div>
<div class="clear" id="error-message"></div>

<!-- Progress bar -->
<div class="hidden" id="progress-container">
<div id="progress-container">
<progress id="progress" value='10' max='100'></progress>
<span id="progress-value">10%</span>
</div>
Expand Down Expand Up @@ -214,12 +216,12 @@ <h3>Great work in taking the next step in achieving your CSS3 goals!</h3>
<!-- Pagination buttons and 'Get Score' button -->
<button type="button" class="btn-pag btn-pag-invalid" id="prev" data-diff="-10">Prev Question</button>
<button type="button" class="btn-pag" id="next" data-diff="10">Next Question</button>
<button class="hidden expandOpen" type="button" id="calculate-score">Get Score!</button>
<button class="hidden expandOpen teal" type="button" id="calculate-score">Get Score!</button>
</form>
</div>

<!-- div for quiz error messages, restart quiz button-->
<!-- <div class="clear" id="error-message"></div> -->
<div class="clear hidden" id="error-message-pb"></div>
<div class="content-box fade-in hidden" id="completed-message-box">
<span id="completed-message"></span>
<button type="button" id="restart-quiz">Have Another Go!</button>
Expand Down
22 changes: 18 additions & 4 deletions js/custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ var quizInstruct = document.getElementById('quiz-instructions');
var quizForm = document.getElementById('quiz-form');
var progessComplete = document.querySelector('.circle.active');
var errorMessage = document.getElementById('error-message');
var errorMessagePB = document.getElementById('error-message-pb');
var completedMessageBox = document.getElementById('completed-message-box');
var questionAmount = 10;

Expand Down Expand Up @@ -108,7 +109,7 @@ function showGetScore(input) {

// Quiz validation - Check that each question has an answer checked. Add the radio button value to the total score; false = 0 / true = 1
function quizValidate() {
// var notAnswered = "";
var notAnswered = "";
var scoreTotal = 0;
var completedMessage = document.getElementById('completed-message');
for (var questionNumber = 1; questionNumber <= questionAmount; questionNumber++) {
Expand All @@ -122,14 +123,25 @@ function quizValidate() {
}
}
if (ansChecked === false) {
errorMessage.innerHTML = ("Uh oh.. You haven't answered all the questions! Please <u>click</u> circles marked with red to answer questions");
return false;
errorMessage.innerHTML = ("Uh oh... You haven't answered all the questions! Please <u>click</u> circles marked with <u>red</u> to answer remaining questions.");
// Display unanswered questions for small screens <768px
notAnswered += questionNumber + ", ";
//return false;
}
}

// Print unanswered error message for small screens <768px
if(notAnswered !== "") {
// if not all questions are answered
errorMessagePB.innerHTML = ("Uh oh... You still need to answer question(s) " + notAnswered);
return false;
}

// Once all questions are answered and 'Get Score' is clicked, hide the quiz form and show congratulations message
quizForm.style.display = 'none';
completedMessageBox.style.display = 'block';
errorMessage.innerHTML = "";
errorMessagePB.innerHTML = "";
completedMessage.innerHTML = ("<h2>Good work " + name.split(" ")[0] + "! You have completed the CSS quiz.</h2><h3>Your score is " + scoreTotal + " out of " + questionAmount + "!</h3>");
}

Expand Down Expand Up @@ -180,11 +192,13 @@ function resetQuiz(){
quizForm.style.display = 'block';
activeQuestion.classList.remove('active');
questionOne.classList.add('active');
getScore.className = 'hidden';
//getScore.className = 'hidden expandOpen';
getScore.classList.add('hidden','expandOpen','teal');
nextButton.classList.remove('btn-pag-invalid');
prevButton.classList.add('btn-pag-invalid');
completedMessageBox.style.display = 'none';
errorMessage.innerHTML = "";
errorMessagePB.innerHTML = "";
resetProgress()
}

Expand Down

0 comments on commit 06dfb69

Please sign in to comment.