2
Seite: (http://progrock.rocks/teaching_materials/loops.html).CSS: Dinge in der erweiterten Druckvorschau in Firefox verschoben
Es ist alles (CSS, JavaScript und HTML) in einer Datei:
<!DOCTYPE html>
<!-- Copyright (c) 2016 Alf P. Steinbach. Boost 1.0 license. -->
<html>
<head>
<meta charset="utf-8">
<title>Lapper for «loops» gruppeøvelse i praktisk regning</title>
<!-- link rel="stylesheet" href="style.css" -->
<style>
* { font: 10pt sans-serif; }
body { margin: 0; padding: 0; background-color: white; }
h1
{
padding-left: 14px; padding-top: 0; padding-bottom: 0.5em; padding-right: 0;
margin-top: 0; margin-bottom: 0;
background-color: lightGray;
font-size: xx-large; font-style: italic; color: #A0B0B0;
}
div#content
{
margin: 0;
padding-left: 0; padding-right: 0;
position: absolute; width: 100%;
}
div#input-area
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
background-color: #F0F0F0;
}
div#notes-container
{
left: 0; right: -0;
padding-left: 14px; padding-right: 14px;
padding-top: 0.5em; padding-bottom: 0.5em;
margin-left: 0; margin-right: 0;
/*display: none;*/
}
input.Number-input
{
width: 5em;
}
.Access-key
{
text-decoration: underline;
}
div.Note
{
margin-top: 0px; margin-right: 12px;
margin-bottom: 8px; margin-left: 0px;
padding-left: 2em; padding-right: 2em;
padding-top: 1em; padding-bottom: 0.5em;
background-color: #FFFFB0;
width: 15em;
overflow: hidden;
border-radius: 1em;
border: 1px gray solid;
display: inline-block;
}
div.Note-figure
{
float: right; font-size: 4em; color: #D0E0E0;
padding: 0px; margin: 0px; vertical-align: top;
transform: rotate(-7deg);
border-radius: 0.5em;
background-color: white;
}
</style>
<script>
function item(id)
{
return document.getElementById(id);
}
function generate()
{
const n_notes = 11;
const operand = parseInt(item("fixed-operand").value);
const operation = item("operation").value; // +, *
const start_number = (operation == "+"? 0 : 1);
console.log("Generate")
var container = item("notes-container");
var collection = item("notes-collection");
if(collection !== null)
{
collection.remove();
collection = null;
}
var message = document.createTextNode("Genererer…");
container.appendChild(message);
collection = document.createElement("div");
collection.id = "notes-collection";
var template = item("note-template")
console.log("template = " + template)
var current = start_number;
for(let i = 0; i < n_notes; ++i)
{
let note = template.cloneNode(true);
note.style.display = "inline-block";
let note_has = note.querySelector("#note-has");
note_has.innerHTML = "Jeg har " + current.toString() + ".";
let note_seeking = note.querySelector("#note-seeking");
let display_op = (operation == "+"? " + " : "∙");
note_seeking.innerHTML = "Hvem har " + current + display_op + operand + "?";
if(i == n_notes - 1) { note_seeking.innerHTML = "Siste tall!"; }
let figure = note.querySelector("#figure");
switch(operation)
{
case "+": figure.innerHTML = i + "∙" + operand; break;
case "*": figure.innerHTML = operand + "↑" + i; break;
}
collection.appendChild(note);
switch(operation)
{
case "+": current += operand; break;
case "*": current *= operand; break;
}
}
message.remove();
container.appendChild(collection);
}
function explanation_of(op)
{
switch(op)
{
case "+": return "dette gir en gangetabell";
case "-": return "dette gir en baklengs gangetabell";
case "*": return "dette gir en potenstabell";
case "/": return "dette gir en baklengs potenstabell";
}
}
function update_explanation()
{
item("operation-explanation").innerHTML =
"(" + explanation_of(item("operation").value) + ").";
}
function on_command_generate()
{
generate();
}
function on_operation_changed()
{
update_explanation();
}
function on_document_loaded()
{
item("title-header").innerHTML = document.title;
item("operation").value = "+";
update_explanation();
generate();
}
</script>
</head>
<body onload="on_document_loaded()">
<h1 id="title-header">asdasd</h1>
<div id="content">
<div id="input-area">
<select id="operation" onchange="on_operation_changed();">
<option value="+">+ (addisjon)</option>
<option value="*">* (multiplikasjon)</option>
</select>
med fast operand
<input id="fixed-operand" type="number"
class="Number-input"
alt="Det faste tallet i utregningene"
value="2"
min="1"
max="10"
>
<span id="operation-explanation"></span>
<button onclick="on_command_generate();" accesskey="g">
<span class="Access-key">G</span>enerér
</button>
</div> <!-- input-area -->
<div id="notes-container">
<div id="note-template" class="Note" style="display:none">
<div id="figure" class="Note-figure">
5∙7
</div>
<div style="position: absolute">
<span id="note-has">Jeg har 35</span>
<br/>
<br/>
<span id="note-seeking">Hvem har 35 + 7?</span>
</div>
</div>
<div id="notes-collection">
</div> <!-- notes-collection -->
<div> <!-- notes-container -->
</div> <!-- content -->
</body>
</html>
Problem: Während in 100% Druckvorschau funktioniert gut,
, wenn ich den Druck vergrößern Vorschau, Dinge nach oder um den Seitenumbruch herum bewegt werden und das Ergebnis ist einfach hässlich und unbrauchbar für den Zweck:
Ich habe versucht, auf einer anderen Maschine, eine CSS-Eigenschaft, die Seitenumbruch innerhalb einer div.Note-figure verhindern sollte, aber das hat nicht funktioniert. Tut mir leid, ich habe es hier nicht. Ich habe auch versucht, Probleme mit Firefox Druckvorschau zu googeln, ohne Glück.