From 0415be3984abf1f44bfbeb7e7699fd672e26b065 Mon Sep 17 00:00:00 2001 From: ajuvercr Date: Thu, 10 Sep 2020 00:28:10 +0200 Subject: [PATCH] give Quiz result some styling --- content/stylesheets/main.css | 57 +++++++++++++++++++++++-------- layouts/partials/pretty_link.erb | 13 +++++++ layouts/quiz.erb | 58 ++++++++++++++++---------------- lib/helpers/util.rb | 15 +++++++++ lib/helpers_.rb | 1 + 5 files changed, 101 insertions(+), 43 deletions(-) create mode 100644 layouts/partials/pretty_link.erb create mode 100644 lib/helpers/util.rb diff --git a/content/stylesheets/main.css b/content/stylesheets/main.css index 6f81239..92d4c48 100644 --- a/content/stylesheets/main.css +++ b/content/stylesheets/main.css @@ -97,7 +97,6 @@ h2 { color: var(--darkblue); } - .beforeTheFold h2 { max-width: 30rem; } @@ -246,11 +245,11 @@ h2 { } fieldset { - max-height: 60vh; - display: grid; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - overflow-y: auto; - margin: auto; + max-height: 60vh; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); + overflow-y: auto; + margin: auto; } fieldset p label { @@ -258,16 +257,46 @@ fieldset p label { } fieldset p { - margin: 15px 10px; + margin: 15px 10px; } fieldset p label input { - margin-right: 10px; + margin-right: 10px; } -.buttons { - width: 70%; - margin: 20px auto; - display: flex; - justify-content: space-between; -} \ No newline at end of file +.buttons { + width: 70%; + margin: 20px auto; + display: flex; + justify-content: space-between; +} + +.link { + display: grid; + grid-template-columns: minmax(min-content, 20%) 80%; + + background-color: #fff; + border-radius: 10px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); + + margin: 30px auto; + + gap: 20px; +} + +.link:hover { + cursor: pointer; +} + +.link__img { + justify-self: center; + align-self: center; + + min-width: 100px; +} + +@media only screen and (max-width: 400px) { + .link { + grid-template-columns: auto; + } +} diff --git a/layouts/partials/pretty_link.erb b/layouts/partials/pretty_link.erb new file mode 100644 index 0000000..bf55e30 --- /dev/null +++ b/layouts/partials/pretty_link.erb @@ -0,0 +1,13 @@ +
+
+ <%= item[:naam] %> +
+
+

+ <%= item[:titel] %> +

+

+ <%= make_some(truncate(item.compiled_content)) %> +

+
+
diff --git a/layouts/quiz.erb b/layouts/quiz.erb index 100a037..0b4c679 100644 --- a/layouts/quiz.erb +++ b/layouts/quiz.erb @@ -8,7 +8,7 @@ @@ -29,7 +29,7 @@ <% end %> return groups; })(); - + // This keeps the state of the current question/result // So navigating between questions works without reload const state = { @@ -41,25 +41,25 @@ 'answers': {}, 'allQuestions': document.getElementsByClassName("question"), }; - + var depth = 0; const previousButton = document.getElementById("previousButton"); const nextButton = document.getElementById("nextButton"); const resultWrapper = document.getElementById("resultWrapper"); - + function reset() { const params = getParams(); - + state.question.index = 'vraag' in params ? parseInt(params['vraag']) : 1; state.question.id = "question_"+state.question.index; state.question.element = document.getElementById(state.question.id); - + state.answers = {}; - + save_state(); showCorrectElements(); } - + function getParams() { const url = window.location.search; if(!url) return {}; @@ -68,50 +68,50 @@ var pair = currentVar.split('='); paramsBuilder[pair[0]] = decodeURIComponent(pair[1]); } - + return paramsBuilder; } - + function createRelativeUrl(newQuestionIndex) { return window.location.pathname + "?vraag="+newQuestionIndex; } - + function showCorrectElements() { // This part resets to the original state; for(let question of state.allQuestions) { question.classList.add("hidden"); } resultWrapper.classList.add("hidden"); - + if(state.question.index == 1) { previousButton.disabled = true; } else { previousButton.disabled = false; } - + if(!state.question.element) { nextButton.disabled = true; resultWrapper.classList.remove("hidden"); - + const result = {}; for(let question of state.allQuestions) { const div = window.sessionStorage[question.id]; if(!div) continue; - + const resultObj = JSON.parse(div); for (let key in resultObj) { if (!(key in result)) result[key] = 0; result[key] += resultObj[key]; } } - + show_result(result); } else { nextButton.disabled = false; state.question.element.classList.remove("hidden"); } }; - + function save_answers(vers) { for (let ver of vers) { if (state.answers[ver]) { @@ -121,13 +121,13 @@ } } } - + function del_answers(vers) { for (let ver of vers) { state.answers[ver] -= 1; } } - + function show_result(result) { for (let ver in result) { if (result[ver] == 0) { @@ -138,47 +138,47 @@ } } } - + function save_state() { window.sessionStorage.setItem(state.question.id, JSON.stringify(state.answers)); } - + function getSelectValues(select) { var result = []; var options = select && select.options; var opt; - + for (var i=0, iLen=options.length; i 1) { depth -= 1; window.history.replaceState("", "", createRelativeUrl(state.question.index - 1)); } - + reset(); } - + window.addEventListener("popstate", e => { e.preventDefault(); goPrevious(); }); - + reset(); <%= yield %> diff --git a/lib/helpers/util.rb b/lib/helpers/util.rb new file mode 100644 index 0000000..0fa0219 --- /dev/null +++ b/lib/helpers/util.rb @@ -0,0 +1,15 @@ +module UtilHelper + # def truncate(string, max=30) + # string.length > max ? "#{string[0...max]}..." : string + # end + + def truncate(string, max=20, delim=" ") + parts = string.split(delim) + parts.length > max ? + parts[0..max].join(delim) + "..." : string + end + + def make_some(string, backup=" ") + string.strip().length > 0 ? string : backup + end +end diff --git a/lib/helpers_.rb b/lib/helpers_.rb index cd54f2e..84ae7a6 100644 --- a/lib/helpers_.rb +++ b/lib/helpers_.rb @@ -6,3 +6,4 @@ use_helper NavigationHelper use_helper VerenigingenHelper use_helper FontAwesomeHelper use_helper SearchHelper +use_helper UtilHelper