Skip to content

Commit

Permalink
SAK-47738 Samigo improve print contrast and layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@ottenhoff
ottenhoff committed Oct 21, 2024
1 parent 3bbfcc4 commit f2d676c
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 117 deletions.
44 changes: 2 additions & 42 deletions samigo/samigo-app/src/webapp/css/print/print.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,3 @@
/* Reseteamos casi todos los css */


/*
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}*/

body {
line-height: 1;
Expand Down Expand Up @@ -59,16 +36,6 @@ textarea {
padding: 0;
}

hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px;
}


/* ESTILOS */

strong {
Expand All @@ -87,10 +54,6 @@ blockquote {
display: none;
}

{
background-color: #eeeeee;
}

#header {
text-align: center;
padding: 2px;
Expand Down Expand Up @@ -118,11 +81,10 @@ t .navModeAction {
}

.assessment_title {
font-size: 1.2em;
font-size: 1.3em;
padding: 1em 3em 1em 1em;
margin-bottom: 0em;
color: #01a5cb;
font-weight: normal;
font-weight: bold;
background-color: transparent !important;
}

Expand All @@ -138,14 +100,12 @@ t .navModeAction {

.part_title_text {
font-size: 1.2em;
color: #01a5cb;
padding: 3em 0em 1em 1em;
font-weight: normal;
}

.part_title {
font-size: 1.2em;
color: #01a5cb;
font-weight: normal;
}

Expand Down
143 changes: 68 additions & 75 deletions samigo/samigo-app/src/webapp/jsf/print/printAssessment.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<link rel="stylesheet" type="text/css" href="/samigo-app/css/imageQuestion.author.css">

<script>
jQuery(window).load(function(){
document.addEventListener('DOMContentLoaded', function() {
$('input:hidden[id^=hiddenSerializedCoords_]').each(function(){
var myregexp = /hiddenSerializedCoords_(\d+_\d+)_(\d+)/
Expand All @@ -41,20 +41,16 @@
}catch(err){}
});
});
</script>


<script>
function resetSelectMenus(){
var selectlist = document.getElementsByTagName("SELECT");
for (var i = 0; i < selectlist.length; i++) {
if ( selectlist[i].id.indexOf("changeQType") >=0){
selectlist[i].value = "";
}
}
}
// If instructor clicks a checkbox, make it apply immediately as clicking the button to Apply Settings seems odd
const checkboxes = document.querySelectorAll('.form-check-input, .form-select');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
document.querySelector('.auto-apply-settings').click();
});
});
});
function clickInsertLink(field){
var insertlinkid= field.id.replace("changeQType", "hiddenlink");
Expand All @@ -72,27 +68,18 @@ document.links[newindex].onclick();
}
function printQuiz() {
const originalContents = document.body.innerHTML;
document.body.innerHTML = document.getElementById("quizWrapper").innerHTML;
window.print();
document.body.innerHTML = originalContents;
return false;
}
</script>
</head>

<body
onload="document.forms[0].reset(); resetSelectMenus(); ;<%= request.getAttribute("html.body.onload") %>; qb_init('print');"
id="qb_print"
class="view_student">
<body id="qb_print" class="view_student">

<!-- content... -->
<!-- some back end stuff stubbed -->

<h:form id="assessmentForm">

<!-- HEADINGS (NOT PRINTED) -->
Expand All @@ -103,62 +90,68 @@ function printQuiz() {

<h:messages/>

<div id="header">
<div class="navModeAction">

<label>
<h:selectBooleanCheckbox id="showKeys" value="#{printSettings.showKeys}" />
<div class="container mt-3">
<div class="navModeAction">
<div class="vstack gap-2">
<!-- Checkboxes -->
<div class="form-check">
<h:selectBooleanCheckbox id="showKeys" value="#{printSettings.showKeys}" styleClass="form-check-input" />
<h:outputLabel for="showKeys" styleClass="form-check-label">
<h:outputText value="#{printMessages.show_answer_key}" />
</label>

&nbsp;&nbsp;&nbsp;

<label>
<h:selectBooleanCheckbox id="showFeedback" value="#{printSettings.showKeysFeedback}" />
<h:outputText value="#{printMessages.show_answer_feedback}" />
</label>

&nbsp;&nbsp;&nbsp;

<label>
<h:selectBooleanCheckbox id="showPartIntros" value="#{printSettings.showPartIntros}" />
<h:outputText value="#{printMessages.show_intros_titles}" />
</label>
</h:outputLabel>
</div>

<br />
<div class="form-check">
<h:selectBooleanCheckbox id="showFeedback" value="#{printSettings.showKeysFeedback}" styleClass="form-check-input" />
<h:outputLabel for="showFeedback" styleClass="form-check-label">
<h:outputText value="#{printMessages.show_answer_feedback}" />
</h:outputLabel>
</div>

<div class="form-check">
<h:selectBooleanCheckbox id="showPartIntros" value="#{printSettings.showPartIntros}" styleClass="form-check-input" />
<h:outputLabel for="showPartIntros" styleClass="form-check-label">
<h:outputText value="#{printMessages.show_intros_titles}" />
</h:outputLabel>
</div>

<label>
<h:selectBooleanCheckbox id="showSamePage" value="#{printSettings.showSamePage}" />
<div class="form-check">
<h:selectBooleanCheckbox id="showSamePage" value="#{printSettings.showSamePage}" styleClass="form-check-input" />
<h:outputLabel for="showSamePage" styleClass="form-check-label">
<h:outputText value="#{printMessages.show_same_page}" />
</label>
</h:outputLabel>
</div>

&nbsp;&nbsp;&nbsp;

<label>
<h:selectBooleanCheckbox id="showSequence" value="#{printSettings.showSequence}" />
<h:outputText value="#{printMessages.show_answer_sequence}" />
</label>

&nbsp;&nbsp;&nbsp;

<div>
<h:outputLabel for="fontSize" value="#{printMessages.font_size}:" />
<h:selectOneMenu id="fontSize" value="#{printSettings.fontSize}">
<f:selectItem itemLabel="#{printMessages.size_xsmall}" itemValue="1" />
<f:selectItem itemLabel="#{printMessages.size_small}" itemValue="2" />
<f:selectItem itemLabel="#{printMessages.size_medium}" itemValue="3" />
<f:selectItem itemLabel="#{printMessages.size_large}" itemValue="4" />
<f:selectItem itemLabel="#{printMessages.size_xlarge}" itemValue="5" />
</h:selectOneMenu>
</div>

<br />

<h:commandButton action="#{pdfAssessment.prepDocumentPDF}" value="#{printMessages.apply_settings}" styleClass="noActionButton" />
<h:outputText value="<input type='button' onclick='printQuiz(); return false;' value='#{printMessages.print_html}' class='noActionButton' />" escape="false" />
<h:commandButton action="#{pdfAssessment.getPDFAttachment}" value="#{printMessages.print_pdf}" styleClass="noActionButton" />
<div class="form-check">
<h:selectBooleanCheckbox id="showSequence" value="#{printSettings.showSequence}" styleClass="form-check-input" />
<h:outputLabel for="showSequence" styleClass="form-check-label">
<h:outputText value="#{printMessages.show_answer_sequence}" />
</h:outputLabel>
</div>

<!-- Font Size Dropdown -->
<div class="mb-3 col-md-3">
<h:outputLabel for="fontSize" styleClass="form-label">
<h:outputText value="#{printMessages.font_size}:" />
</h:outputLabel>
<h:selectOneMenu id="fontSize" value="#{printSettings.fontSize}" styleClass="form-select">
<f:selectItem itemLabel="#{printMessages.size_xsmall}" itemValue="1" />
<f:selectItem itemLabel="#{printMessages.size_small}" itemValue="2" />
<f:selectItem itemLabel="#{printMessages.size_medium}" itemValue="3" />
<f:selectItem itemLabel="#{printMessages.size_large}" itemValue="4" />
<f:selectItem itemLabel="#{printMessages.size_xlarge}" itemValue="5" />
</h:selectOneMenu>
</div>

<!-- Buttons -->
<div class="d-flex gap-2">
<h:commandButton action="#{pdfAssessment.prepDocumentPDF}" value="#{printMessages.apply_settings}" styleClass="btn btn-primary d-none auto-apply-settings" />
<h:commandButton onclick="printQuiz();" value="#{printMessages.print_html}" type="button" styleClass="btn btn-secondary" />
<h:commandButton action="#{pdfAssessment.getPDFAttachment}" value="#{printMessages.print_pdf}" styleClass="btn btn-secondary" />
</div>
</div>
</div>
</div>
<!-- END HEADINGS -->

<h:outputText escape="false" value="<div id='quizWrapper' style='font-size: 10px;'>" rendered="#{printSettings.fontSize == '1'}" />
Expand All @@ -180,7 +173,7 @@ function printQuiz() {
<h:outputText value="#{pdfAssessment.title}" escape="false"/>
</div>

<div class="assessment_intro, quiz">
<div class="assessment_intro quiz">
<h:outputText id="assessmentIntro" value="#{delivery.instructorMessage}"
escape="false" rendered="#{printSettings.showPartIntros && delivery.instructorMessage != null && delivery.instructorMessage != ''}" />
</div>
Expand Down

0 comments on commit f2d676c

Please sign in to comment.