Skip to content
Snippets Groups Projects
Commit 8fcf1a75 authored by Lucas's avatar Lucas
Browse files

Fixed content

parent 341f8478
No related branches found
No related tags found
1 merge request!7Better Usability
Hide whitespace changes
Inline Side-by-side
Showing
with 530 additions and 136 deletions
public/Json/Fallzahlen.json
+ 34
− 18
View file @ 8fcf1a75
[
{
"BaWü" :{
"Land": "BaWü",
"Zahlen" : 880657
},
"Bayern" : {
{
"Land": "Bayern",
"Zahlen" : 1191561
},
"Berlin": {
{
"Land" : "Berlin",
"Zahlen" : 285058
},
"Brandenburg" : {
{
"Land" : "Brandenburg" ,
"Zahlen" : 192271
},
"Bremen" : {
{
"Land": "Bremen" ,
"Zahlen" : 40950
},
"Hamburg" : {
{
"Land": "Hamburg" ,
"Zahlen" : 118126
},
"Hessen" : {
{
"Land": "Hessen" ,
"Zahlen" : 428472
},
"Meck-Pom" :{
{
"Land" : "Meck-Pom",
"Zahlen" : 77675
},
"Nieder-Sachsen" : {
{
"Land": "Nieder-Sachsen" ,
"Zahlen" : 390966
},
"NRW":{
{
"Land": "NRW",
"Zahlen" : 1221048
},
"RLP" : {
{
"Land" : "RLP" ,
"Zahlen" : 244740
},
"Saarland" : {
{
"Land": "Saarland" ,
"Zahlen" : 64688
},
"Sachsen" : {
{
"Land": "Sachsen" ,
"Zahlen" : 544655
},
"Sachsen-Anhalt" : {
"Zahlen" : 174307
{
"Land": "Sachsen-Anhalt" ,
"Zahlen" : 174307
},
"Schleswig" : {
{
"Land": "Schleswig" ,
"Zahlen" : 100103
},
"Thüringen" : {
{
"Land": "Thüringen" ,
"Zahlen" : 230684
}
}
\ No newline at end of file
]
public/frames/A12/U12.3.html 0 → 100644
+ 45
− 0
View file @ 8fcf1a75
<!doctype html>
<h1>Fill with contents</h1>
<style>
textarea { margin: 1rem; display: block; width: 80vw; height: 20vh; }
input { margin: 1rem; }
</style>
<form method="post">
<fieldset>
<legend>Select content area and add a new text:</legend>
<select name="top_header">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
<select name="sub_header">
</select>
<textarea name="content"></textarea>
<input type="submit" value="Submit">
</fieldset>
</form>
<?PHP
$file = './data.json';
$contents = file_get_contents( $file );
$json = json_decode( $contents, true );
if ( isset($_POST[ 'top_header' ]) && isset($_POST[ 'sub_header' ]) && isset($_POST[ 'content' ]) ){
$top_header = $_POST[ 'top_header' ];
$sub_header = $_POST[ 'sub_header' ];
$content = $_POST[ 'content' ];
$json[ $top_header ][ $sub_header ] = $content;?>
<script>
let json = <?PHP echo json_encode( $json ) ?>;
const top_header = document.querySelector('select[name="top_header"]');
const sub_header = document.querySelector('select[name="sub_header"]');
top_header.addEventListener('change', e => {
Object.keys( json[ e.target.value ] ).forEach( key => {
const option = document.createElement('option');
option.value = key;
option.innerText = key;
sub_header.append( option );
});
});
</script>
public/frames/A3/U3.1.html
+ 2
− 2
View file @ 8fcf1a75
......@@ -12,7 +12,7 @@
}
aside.left{
background-color: lime;
height: auto;
height: 500px;
flex: 20%;
}
aside.right{
......@@ -27,7 +27,7 @@
}
nav{
background-color: red;
height: auto;
height: 50px;
flex: 100%;
}
/*medium*/
......
public/frames/A3/U3.2.html
+ 28
− 27
View file @ 8fcf1a75
......@@ -8,89 +8,90 @@
@media screen and (min-width: 300px){
@media screen and (max-width: 300px){
.container {
height: 30em;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(12, 1fr);
grid-template-columns: 50% 50%;
grid-template-rows: 20% 40% 40%;
}
.header{
grid-row: 1 ;
grid-column: 1/3;
background-color: red;
}
.left{
grid-row: 2;
grid-column: 1;
background-color: lime;
}
.right{
grid-row: 12;
grid-row: 2;
grid-column: 2;
background-color: deeppink;
}
.main{
grid-row: 3 / span 9;
grid-row: 3;
grid-column: 1;
background-color: blue;
}
}
@media screen and (max-width: 600px){
.container {
height: 40em;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 80%;
}
.header{
grid-column: 1 / span 3;
grid-row: 1 ;
grid-column: 1/4;
background-color: red;
}
.left{
grid-row: 2;
grid-column: 1;
grid-row: 2/ span 4;
background-color: lime;
}
.right{
grid-column: 1 / span 3;
grid-row: 6;
grid-row: 2;
grid-column: 3;
background-color: deeppink;
}
.main{
grid-column: 2/span 2;
grid-row: 2 / span 4;
grid-row: 2;
grid-column: 2;
background-color: blue;
}
}
@media screen and (min-width: 600px){
.container {
height: 50em;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
". . . . ."
". . . . ."
". . . . .";
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 80%;
}
.header{
grid-column: 1 / span 5;
grid-row: 1 ;
grid-column: 1/4;
background-color: red;
}
.left{
grid-row: 2;
grid-column: 1;
grid-row: 2/ span 2;
background-color: lime;
}
.right{
grid-column: 5;
grid-row: 2 / span 2;
grid-row: 2;
grid-column: 3;
background-color: deeppink;
}
.main{
grid-column: 2/span 3;
grid-row: 2 / span 2;
grid-row: 2;
grid-column: 2;
background-color: blue;
}
}
......
public/frames/A5/U5.2.html
+ 110
− 7
View file @ 8fcf1a75
<!DOCTYPE html>
<body>
<h1>Rednerliste</h1>
<div id="Input"></div>
<ol id= "redner"></ol>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Übung 5-2</title>
</head>
<body onload="updatePage()">
<h1 id = "h">Rednerliste</h1>
<form>
<label for="fname">Neuer Redner:</label>
<input type="text" id="fname" name="fname">
<!--onclick="addItemToList()" -->
<button id ="btn" onclick="addItemToList(event)" > Hinzufügen</button>
</form>
<ul id = "list"></ul>
<script>
const inoutDiv = document.getElementById("Input");
const content = 'Neuer Redner: <input type="text name="name" id="name"><button onclick="addMember()">Hinzufuegen</button>';
inoutDiv.innerHTML = content;
var listClocks = []; // list of all clocks
var count = 0; // count to give an id
//class Clock
function Clock(id, name){
this.id = id;
this.name = name;
this.summedTime = new Date(0,0,0);
this.run = true;
return this;
}
//Update page after 1s
function updatePage(){
listClocks.forEach(clock =>{
if(clock.run === true){
var seconds = clock.summedTime.getSeconds();
clock.summedTime.setSeconds(seconds + 1); // add second
const field = document.getElementById("clockText"+clock.id);
const button = document.getElementById("clockButton"+clock.id);
field.textContent = clock.name + " " + cleanTimeOutput(clock.summedTime) + " "; //update field
field.append(button);
}
})
setTimeout(updatePage, 1000);
}
function addItemToList(event){
event.preventDefault(); // prevent reload of page
const name = document.getElementById("fname").value;
if(name.trim().length === 0){
alert("Eingabe leer!")
}
else{
document.getElementById("fname").value = ""; // reset form
const newItem = document.createElement("li"); // new list element
var newClock = new Clock(count,name); // new Clock
listClocks.push(newClock); //add Clock to list
newItem.textContent = name +" " + cleanTimeOutput(listClocks[count].summedTime) + " ";
newItem.id = "clockText"+count;
//Definition of clock buttons
const clockButton = document.createElement('button');
clockButton.innerHTML = "Stop!";
clockButton.id="clockButton"+count;
clockButton.addEventListener("click", () => {
newClock.run = !newClock.run;
stopTimeExceptFrom(newClock);
});
newItem.appendChild(clockButton); //add button to field
//add item to list
document.getElementById("list").appendChild(newItem);
stopTimeExceptFrom(newClock); //stop all other clocks
++count;
}
}
// Stop all given times except given clock
function stopTimeExceptFrom(givenClock){
if(givenClock.run === true){
document.getElementById("clockButton"+givenClock.id).innerHTML = "Stop!";
}
else{
document.getElementById("clockButton"+givenClock.id).innerHTML = "Start!";
}
// stop all other clocks
listClocks.forEach(clock =>{
if(givenClock.id !== clock.id){
if(clock.run === true){
clock.run = false;
document.getElementById("clockButton"+clock.id).innerHTML = "Start!";
}
}
})
}
// create String of time output
function cleanTimeOutput(date) {
function checkTime(i) {
if (i < 10) {i = "0" + i};
return i;
}
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
m = checkTime(m);
s = checkTime(s);
return h + ":" + m + ":" + s;
}
</script>
</body>
</html>
public/frames/A9/U9.2.html
+ 77
− 78
View file @ 8fcf1a75
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Übung 9.2</title>
<meta charset="utf-8">
<title>Ü9.2</title>
<style>
</style>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body onload = buildChart()>
<body>
<div id="my_dataviz"></div>
</body>
<script>
const svgNS = "http://www.w3.org/2000/svg";
const barThickness = 5;
const barGap = 1;
const collectionGap=5;
const xBar = 60;
const colors = ["blue", "red", "black"];
let posY = 0;
//Inspired by https://www.d3-graph-gallery.com/graph/barplot_horizontal.html
// set the dimensions and margins of the graph
var margin = { top: 20, right: 30, bottom: 40, left: 90 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
const urlJson = "/Json/Fallzahlen.json";
const fetchContent = async() => {
const content = await fetch(urlJson);
return await content.json();
}
// Parse the Data
console.log(d3.json("/Json/FallZahlen.json"))
data1 = d3.json("/Json/FallZahlen.json")
d3.json("/Json/FallZahlen.json", function (data) {
const buildChart = async() =>{
const fetchedContent = await fetchContent();
let svg = document.getElementById('chart');
const max = findMaxInJson(fetchedContent);
adaptVerticalLines(max);
for(const [keyI, valueI] of Object.entries(fetchedContent)){
svg.appendChild(createNaming(keyI, calculateYText(posY, barThickness, barGap)));
let i = 0;
for(const [keyII, valueII] of Object.entries(fetchedContent[keyI])){
let newElement = createBar(valueII/max * 200, barThickness,xBar, posY, colors[i++]);
svg.appendChild(newElement);
posY += barThickness + barGap;
}
posY+=collectionGap;
}
}
// Add X axis
var x = d3.scaleLinear()
.domain([0, 1300000])
.range([0, width - 70]);
svg.append("g")
.attr("transform", "translate(50," + (height - 20) + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.attr("transform", "translate(-13,10)rotate(-90)")
.style("text-anchor", "end");
function adaptVerticalLines(max){
let step = Math.pow(10, Math.ceil(Math.log10(max))-2);
const width = max / step;
let pattern = document.getElementById("vertical-line");
pattern.setAttribute("width", `${width}`);
}
// Y axis
var y = d3.scaleBand()
.range([0, height - 20])
.domain(data.map(function (d) { return d.Land; }))
.padding(.1);
svg.append("g")
.call(d3.axisLeft(y))
.attr("transform", "translate(50,0)")
function createNaming(text, pos){
let newElement = document.createElementNS(svgNS,"text");
newElement.setAttribute("text", text);
newElement.setAttribute("y", pos);
newElement.setAttribute("font-size", "4px");
newElement.setAttribute("fill", "black");
const textNode = document.createTextNode(text);
newElement.appendChild(textNode);
return newElement;
}
//Bars
var bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("y", function (d) { return y(d.Land); })
.attr("height", y.bandwidth())
.attr("fill", "#7cb5ec")
.attr("transform", "translate(50,0)")
.attr("x", x(0))
.attr("width", function (d) { return x(0) - x(d.Zahlen); })
.transition()
.duration(800)
.attr("width", function (d) { return x(d.Zahlen); })
.delay(function (d, i) { return (i * 100) })
function createBar(width, height, x, y, color){
let newElement = document.createElementNS(svgNS,"rect");
newElement.setAttribute("width", `${width}`);
newElement.setAttribute("height", `${height}`);
newElement.setAttribute("y", `${y}`);
newElement.setAttribute("x", `${x}`);
newElement.setAttribute("fill", color);
return newElement;
}
var texts = svg.selectAll(".myTexts")
.data(data)
.enter()
.append("text")
.transition()
.duration(800)
.attr("transform", "translate(50,15)")
.attr("x", function (d) { return x(d.Zahlen) })
.attr("y", function (d) { return y(d.Land); })
.text(function (d) { return d.Zahlen })
.delay(function (d, i) { return (i * 100) });
function calculateYText(posY, barThickness, barGap){
return posY + (3*barThickness + 2*barGap)/2;
}
function findMaxInJson(content){
let max = 0;
for(const [keyI, valueI] of Object.entries(content)){
for(const [keyII, valueII] of Object.entries(content[keyI])){
if(valueII > max){ max = valueII;}
}
}
const step = Math.pow(10, Math.ceil(Math.log10(max))-2);
const maxVal = Math.ceil(max/step)*step + step;
return maxVal;
}
</script>
<svg id="chart" viewBox="0 0 200 400">
<pattern id="vertical-line" x="0" y="0" width="10" height="200" patternUnits="userSpaceOnUse">
<path d="M0,0 l0,200" style="stroke:grey; stroke-width:1" />
</pattern>
<rect x=60 width="200" height="370" fill="url(#vertical-line)" />
</svg>
</body>
})
</script>
</html>
src/components/U12.vue
+ 14
− 0
View file @ 8fcf1a75
......@@ -35,6 +35,20 @@
</div>
</div>
<!--Exercise 3--------------------------------------------------------------->
<div class="exercise-item">
<div class="exercise-description">
<h3>Content-Editor mit PHP</h3>
</div>
<div class="question">
Erstellen Sie einen Cotenteditor mit PHP
<br>
<br>
<iframe src="/frames/A12/U12.3.html"></iframe>
</div>
</div>
</div>
</div>
</template>
......
src/components/U5.vue
+ 71
− 1
View file @ 8fcf1a75
......@@ -17,7 +17,77 @@
Implementieren Sie Performanzmessungen zum Vergleich von innerHTML, innerText, textContent und outerHTML selbstständig in JavaScript durch Nutzung der DOM API.
<br>
<br>
<iframe src="/frames/A5/U5.1.html"></iframe>
Code:
<br>
<pre>
<code class="keyword">
const testDiv = document.getElementById('test');
const testDiv1 = document.getElementById('test1');
const testDiv2 = document.getElementById('test2');
const testDiv3 = document.getElementById('test3');
const content = 'testtext';
function timeIH(){
testDiv.innerHTML = content;
}
function timeIT(){
testDiv1.innerText = content;
}
function timeTC(){
testDiv2.textContent = content;
}
function timeOH(){
testDiv3.textContent = content;
}
function performanceIH(){
const timeIH1 = performance.now();
timeIH();
const timeIH2 = performance.now();
return timeIH2-timeIH1;
}
function performanceIT(){
const timeIT1 = performance.now();
timeIT();
const timeIT2= performance.now();
return timeIT2 - timeIT1;
}
function performanceTC(){
const timeTC1 = performance.now();
timeTC();
const timeTC2 = performance.now();
return timeTC2 - timeTC1;
}
function performanceOH(){
const timeOH1 = performance.now()
timeOH();
const timeOH2 = performance.now();
return timeOH2 - timeOH1;
}
const ihp = document.getElementById("IH");
const ihtime = performanceIH();
ihp.innerHTML = ihtime;
const itp = document.getElementById("IT");
const ittime = performanceIT();
itp.innerText = ittime;
const tcp = document.getElementById("TC");
const tctime = performanceTC();
tcp.textContent = tctime;
const ohp = document.getElementById("OH");
const ohtime = performanceOH();
ohp.outerHTML = ohtime;
</code>
</pre>
</div>
</div>
<!--Exercise 2----------------------------------------------->
......
src/components/U6.vue
+ 149
− 3
View file @ 8fcf1a75
......@@ -19,7 +19,41 @@
Das Eingabefeld der Zeichenkette soll rot gefärbt werden, wenn es ein Klammerpaar gibt, das falsch geschachtelt ist<br>
<br>
<br>
<iframe src="/frames/A6/U6.1.html"></iframe>
<pre>
<code class="keyword">
var text = document.getElementById("input").value();
const start1 = text.indexOf("{");
const stop1 = text.indexOf("}");
var text1;
const start2 = text.indexOf("[");
const stop2 = text.indexOf("]");
var text2;
const start3 = text.indexOf("(");
const stop3 = text.indexOf(")");
var text3;
function mark(){
text1 = text.substr(start1,stop1);
text2 = text.substr(start2,stop2);
text3 = text.substr(start3,stop3);
if(stop1 &lt; stop2){
text1 = fontcolor("red") + text.substr(start1,stop2);
}
if(stop1 &lt; stop3){
text1 = fontcolor("red") + text.substr(start1,stop3);
}
if(stop2 &lt; stop3){
text2 = fontcolor("red") + text.substr(start2,stop3);
}
text = text1 + text2 + text3;
}
mark();
</code>
</pre>
</div>
</div>
<!--Exercise 2--------------------------------------------------------->
......@@ -45,7 +79,87 @@
Stellen Sie bei Ihrer Klasse aus der letzten Aufgabe die topologische Iterierbarkeit mittels Generator her
<br>
<br>
<iframe src="/frames/A6/U6.3.html"></iframe>
<pre>
<code class="keyword">
class Vorrang {
constructor(list) {
const list_tmp = Vorrang.top_sort(list);
this.list = [];
for (var i = 0; i &lt; list_tmp.length; i++) {
this.list.push(list_tmp[i][0]);
}
this.list.push(list_tmp[list_tmp.length - 1][1]);
}
static top_sort(list_param) {
var list = [...list_param]
var output = []
const len = list.length;
for (var _ = 0; _ &lt; len; _++) {
let indexI = -1;
let indexJ = -1;
for (var i = 0; i &lt; list.length; i++){
indexI = i;
indexJ = -1;
for (var j = 0; j &lt; list.length; j++) {
if (i != j && list[i][0] == list[j][1]) {
indexJ = j;
break;
}
}
if (indexJ == -1){
break;
}
}
output.push(list[indexI]);
list.splice(indexI, 1);
}
return output;
}
[Symbol.iterator]() {
var i = 0;
const l = this.list;
return {
next() {
return {
value: l[i++],
done: i > l.length
}
}
}
}
}
const input_text = document.getElementById('input_text');
const subm = document.getElementById('submit');
const div_out = document.getElementById('div_out');
subm.addEventListener('click', calc);
function calc(event) {
var txt = input_text.value;
var outer = txt.split('], [');
var list_input = [];
for (const elem of outer) {
var inner = elem.split('"');
list_input.push([inner[1], inner[3]]);
}
const vorang = new Vorrang(list_input);
for (const elem of vorang) {
const out = document.createElement('p');
out.innerHTML = elem;
console.log(div_out);
div_out.append(out);
}
}
[["studieren", "prüfen"], ["schlafen", "studieren"], ["essen", "studieren"]]
</code>
</pre>
</div>
</div>
<!--Exercise 4--------------------------------------------------------->
......@@ -71,7 +185,39 @@
Schreiben Sie eine rekursive Funktion deepCopy( struct ) als ES6-Ausdruck, so dass beliebig geschachtelte Arrays und Objekte struct tiefenkopiert werden können.
<br>
<br>
<iframe src="/frames/A6/U6.5.html"></iframe>
<pre>
<code class="keyword">
const deepCopy = (myObject) => {
let copy;
if (typeof myObject !== "object" || myObject == null) {
return myObject;
}
copy = Array.isArray(myObject) ? [] : {};
for (let key in myObject) {
let value = myObject[key];
copy[key] = deepCopy(value);
}
return copy;
}
const testArray = [[[1, 2], [3, 4]], [1, 2, 3, 4]];
const testObject = {myarray: [[[1, 2], [3, 4]], [1, 2, 3, 4]], hello: "world"};
const test1 = deepCopy(testArray);
console.assert(test1[0][0] !== testArray[0][0] && test1[0][0][0] === testArray[0][0][0]);
const test2 = deepCopy(testObject);
console.assert(test2["myarray"][0][0] !== testObject["myarray"][0][0] && test2["myarray"][0][0][0] === testObject["myarray"][0][0][0]);
console.log(deepCopy(testArray));
console.log(deepCopy(testObject));
</code>
</pre>
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment