update cringe
This commit is contained in:
parent
ece0bffab7
commit
fefb3da2bd
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1,3 @@
|
|||||||
visit_counter.log
|
visit_counter.log
|
||||||
|
forum
|
||||||
|
.well-known
|
||||||
|
|||||||
78
T erreser/testat1.html
Normal file
78
T erreser/testat1.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta title="Weather Data">
|
||||||
|
<style>
|
||||||
|
li{display:inline-block;list-style-type:none; margin-right:10%; margin-left:10%;}
|
||||||
|
body{padding:0px; background-color:yellow;margin:0px;font-family: Courier; text-align:center;}
|
||||||
|
.fixed{padding:20px;width:100%;position:fixed;margin:0px}
|
||||||
|
header{border-bottom-style:solid; background-color:Red; top:0;}
|
||||||
|
footer{border-top-style:solid;background-color:blue;bottom:0;}
|
||||||
|
button{cursor: not-allowed; opacity: 0.6;border:none; border-radius:25px; padding:16px 32px; display:inline-block;text-decoration:none;text-align:center;background-color:Gainsboro; -webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;}
|
||||||
|
button:hover{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
|
||||||
|
/*cursor:pointer;*/
|
||||||
|
.hor-center{width: 100%; height:100%;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
|
||||||
|
.center{position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%); }
|
||||||
|
.left-center{position:absolute;top: 50%;-ms-transform: translate(0%, -50%);transform: translate(0%, -50%); }
|
||||||
|
.left{width:15%;height:100%;position:absolute;background-color:Orange;border-right-style:solid;}
|
||||||
|
/* nav{position:absolute; left:0%;}*/
|
||||||
|
.text_left{text-align:left;}
|
||||||
|
.text_right{text-align:right;padding-right:10%}
|
||||||
|
.th{/*margin-right:20%;*/ background-color:turquoise; border-style: double solid solid double; border-radius: 5px; padding: 2px}
|
||||||
|
article{border-radius:5px; border-style: double solid solid double; cursor:wait; background-color: Lime; padding: 2px}
|
||||||
|
</style>
|
||||||
|
<script src="./testat1.js">
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||||||
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="left">
|
||||||
|
<div class="left-center">
|
||||||
|
<nav style="text-align:right;"> Navigation:
|
||||||
|
<ul style= "text-align:right;">
|
||||||
|
<li style="text-align:left; margin-right:0%; margin: 2%;"><a href="https://www.hof-university.de">Hofschule Hoch</a></li>
|
||||||
|
<li style="text-align:left; margin-right:0%; margin: 2%;"><a href="https://moodle.hof-university.de">Moodle</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<header class="fixed"><h1 style="color:blue;">DAS WETTER IN HOF</h1></header>
|
||||||
|
<section class="center">
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<tr><th class ="text_right"><div class="th">Attribut</div></th><th class ="text_left"><div class = "th">Wert</div></th></tr>
|
||||||
|
<tr><td class="text_right"><article>Uhrzeit der Datenmessung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Temperatur</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Luftfeuchtigkeit</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Luftdruck</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Windgeschwindigkeit</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Windgeschwindigkeit in km/h</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Windrichtung in Grad</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Windrichtung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Sonneneinstrahlung</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Niederschlag</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Temperatur der Erde</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
<tr><td class="text_right"><article>Feuchtigkeit der Erde</article></td><td class ="text_left"><article>Loading...</article></td></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<footer class="fixed">
|
||||||
|
<ul>
|
||||||
|
<li><button onclick="toggleHeaderVisibility();">Toggle V</button></li>
|
||||||
|
<li><button onclick="makeArticlesInvisible();">Hide Article</button></li>
|
||||||
|
<li><button onclick="makeArticlesVisible();">Show Hidden Article</button></li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
bottomFunction();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
T erreser/testat1.js
Normal file
46
T erreser/testat1.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
const restAPI = '/restFullAPI/v2';
|
||||||
|
visibilityOfHeader = true;
|
||||||
|
documentIsLoaded = false;
|
||||||
|
|
||||||
|
function bottomFunction(){
|
||||||
|
if(typeof(jQuery) == "undefined"){alert('Could not Load JQuery! Resetting to default!'); documentIsLoaded = true;}
|
||||||
|
$(document).ready(function(){
|
||||||
|
documentIsLoaded = true;
|
||||||
|
$("button").css("cursor", "pointer");
|
||||||
|
$("button").css("opacity", "1.0");
|
||||||
|
});
|
||||||
|
$.ajax({
|
||||||
|
type: 'GET',
|
||||||
|
url: restAPI,
|
||||||
|
success: function(data){
|
||||||
|
let buf = document.getElementsByClassName("text_left");
|
||||||
|
for(let i = 1; i < buf.length; i++){
|
||||||
|
buf[i].childNodes[0].innerHTML = Object.values(data)[i-1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleHeaderVisibility(){
|
||||||
|
if(!documentIsLoaded) return;
|
||||||
|
document.getElementsByTagName('header')[0].style.visibility=visibilityOfHeader?'hidden':'visible';
|
||||||
|
visibilityOfHeader = visibilityOfHeader ? false: true;
|
||||||
|
}
|
||||||
|
function getArticles(){
|
||||||
|
if(!documentIsLoaded) return;
|
||||||
|
return document.getElementsByTagName('article');
|
||||||
|
}
|
||||||
|
function makeArticlesInvisible(){
|
||||||
|
if(!documentIsLoaded) return;
|
||||||
|
var arts = getArticles();
|
||||||
|
for(const e of arts){
|
||||||
|
e.style.visibility='hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function makeArticlesVisible(){
|
||||||
|
if(!documentIsLoaded) return;
|
||||||
|
var arts = getArticles();
|
||||||
|
for(const e of arts){
|
||||||
|
e.style.visibility='visible';
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
cascadia/cascadia.zip
Normal file
BIN
cascadia/cascadia.zip
Normal file
Binary file not shown.
23
cascadia/index.html
Normal file
23
cascadia/index.html
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Cascadia</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="Cascadia Resources">
|
||||||
|
<meta property="og:image" content="https://nsfw.cringe-studios.com/grimacing.png">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://cascadia.cringe-studios.com/">
|
||||||
|
<meta property="og:title" content="Cascadia">
|
||||||
|
<meta property="og:description" content="Cascadia Resources">
|
||||||
|
<link rel="icon" href="https://cascadia.cringe-studios.com/icons/compressed.gif">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Index of /</h1>
|
||||||
|
<table>
|
||||||
|
<tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th><a href="?C=N;O=D">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th><th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a></th></tr>
|
||||||
|
<tr><th colspan="5"><hr></th></tr>
|
||||||
|
<tr><td valign="top"><img src="/icons/compressed.gif" alt="[ ]"></td><td><a href="cascadia.zip">cascadia.zip</a></td><td align="right">2022-11-03 08:02 </td><td align="right"> 57M</td><td> </td></tr>
|
||||||
|
<tr><th colspan="5"><hr></th></tr>
|
||||||
|
</table>
|
||||||
|
<address>Apache/2.4.41 (Ubuntu) Server at cascadia.cringe-studios.com Port 443</address>
|
||||||
|
</body></html>
|
||||||
12
dev/shittyauth.html
Normal file
12
dev/shittyauth.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header><h1>ShittyAuthLauncher Example Page</h1></header>
|
||||||
|
<main><p>Lorem Ipsum dolor sit amet etc etc etc.</p></main>
|
||||||
|
<footer></footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
fnont/ComicMono-Bold.ttf
Normal file
BIN
fnont/ComicMono-Bold.ttf
Normal file
Binary file not shown.
BIN
fnont/ComicMono.ttf
Normal file
BIN
fnont/ComicMono.ttf
Normal file
Binary file not shown.
10
fnont/comic.css
Normal file
10
fnont/comic.css
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "Comic Mono";
|
||||||
|
src: url('ComicMono.ttf') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Comic Mono";
|
||||||
|
font-weight: boldM
|
||||||
|
src: url('ComicMono-Bold.ttf') format('truetype');
|
||||||
|
}
|
||||||
3
img/.htaccess
Normal file
3
img/.htaccess
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
RewriteRule ^Ecchi2.png uwu.php [NC]
|
||||||
BIN
img/393852367751086090.gif
Normal file
BIN
img/393852367751086090.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
img/Ecchi2.png
Normal file
BIN
img/Ecchi2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 598 KiB |
BIN
img/miku_neko_dance.gif
Normal file
BIN
img/miku_neko_dance.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
BIN
img/oldoldgraphite_512.png
Normal file
BIN
img/oldoldgraphite_512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 161 KiB |
12
img/uwu.php
Normal file
12
img/uwu.php
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
$userAgent = $_SERVER['HTTP_USER_AGENT'];
|
||||||
|
// file_put_contents("uwu.txt", $userAgent);
|
||||||
|
if(strpos($userAgent, "Discordbot") || strpos($userAgent, "Mac OS") || strpos($userAgent, "Steam")) {
|
||||||
|
// uwu
|
||||||
|
header("Content-Type: image/png");
|
||||||
|
echo file_get_contents("Ecchi2.png");
|
||||||
|
}else {
|
||||||
|
// Normal cringo
|
||||||
|
header("Location: https://www.youtube.com/watch?v=dQw4w9WgXcQ");
|
||||||
|
}
|
||||||
1
img/uwu.txt
Normal file
1
img/uwu.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
Valve/Steam HTTP Client 1.0 (SteamChatURLLookup)
|
||||||
@ -12,6 +12,7 @@
|
|||||||
|
|
||||||
<title>¢яιηgє $тυ∂ισѕ</title>
|
<title>¢яιηgє $тυ∂ισѕ</title>
|
||||||
<link rel="icon" href="https://cdn.discordapp.com/attachments/906285431782539294/959130243053010994/Untitled.png">
|
<link rel="icon" href="https://cdn.discordapp.com/attachments/906285431782539294/959130243053010994/Untitled.png">
|
||||||
|
<link rel="stylesheet" href="/fnont/comic.css">
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
|
||||||
@ -26,7 +27,7 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: 'Courier';
|
font-family: 'Comic Mono';
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
background-color:yellow;
|
background-color:yellow;
|
||||||
|
|||||||
BIN
lzk/POW.zip
Normal file
BIN
lzk/POW.zip
Normal file
Binary file not shown.
BIN
lzk/concatenated-js.pdf
Normal file
BIN
lzk/concatenated-js.pdf
Normal file
Binary file not shown.
BIN
lzk/concatonated_2_2022.pdf
Normal file
BIN
lzk/concatonated_2_2022.pdf
Normal file
Binary file not shown.
@ -51,8 +51,10 @@ function insertAnswers() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log("answer", answer);
|
||||||
|
|
||||||
let answers = form.getElementsByClassName("answer")[0];
|
let answers = form.getElementsByClassName("answer")[0];
|
||||||
if(answers != null && answers.tagName == "TABLE") {
|
if(answers != null && answers.tagName == "TABLE") { // Zuordnung
|
||||||
for(let tr of answers.getElementsByTagName("tr")) {
|
for(let tr of answers.getElementsByTagName("tr")) {
|
||||||
let ans = answer[normalize(tr.children[0].getElementsByTagName("p")[0].innerText)];
|
let ans = answer[normalize(tr.children[0].getElementsByTagName("p")[0].innerText)];
|
||||||
let s = tr.children[1].getElementsByTagName("select")[0];
|
let s = tr.children[1].getElementsByTagName("select")[0];
|
||||||
@ -63,37 +65,53 @@ function insertAnswers() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else {
|
return;
|
||||||
let selects = form.getElementsByTagName("select");
|
}
|
||||||
if(selects.length > 0) { // Question with placeholders
|
|
||||||
for(let i = 0; i < selects.length; i++) {
|
let textAreas = form.getElementsByTagName("textarea");
|
||||||
let ans = answer[i];
|
if(textAreas.length > 0) { // qtype_pmatch, essay
|
||||||
let s = selects[i];
|
let ta = textAreas[0];
|
||||||
for(let j = 0; j < s.options.length; j++) {
|
ta.value = answer;
|
||||||
if(normalize(s.options[j].innerText) == ans) {
|
return;
|
||||||
s.selectedIndex = j;
|
}
|
||||||
break;
|
|
||||||
}
|
let selects = form.getElementsByTagName("select");
|
||||||
|
if(selects.length > 0) { // Question with placeholders
|
||||||
|
for(let i = 0; i < selects.length; i++) {
|
||||||
|
let ans = answer[i];
|
||||||
|
let s = selects[i];
|
||||||
|
for(let j = 0; j < s.options.length; j++) {
|
||||||
|
if(normalize(s.options[j].innerText) == ans) {
|
||||||
|
s.selectedIndex = j;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}else {
|
|
||||||
for(let a of answers.children) {
|
|
||||||
let aEl = a.getElementsByTagName("p")[0];
|
|
||||||
if(!aEl) aEl = a.getElementsByTagName("label")[0];
|
|
||||||
if(!aEl) aEl = a.getElementsByClassName("answernumber")[0].nextElementSibling;
|
|
||||||
let aText = normalize(aEl.innerText);
|
|
||||||
let input = a.getElementsByTagName("input")[0];
|
|
||||||
if(input.type == "hidden") input = a.getElementsByTagName("input")[1];
|
|
||||||
input.checked = answer.includes(aText);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let inputs = answers.getElementsByTagName("input");
|
||||||
|
if(inputs.length > 0 && inputs[0].type == "text") { // Single line text
|
||||||
|
let i = inputs[0];
|
||||||
|
i.value = answer;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let a of answers.children) { // Multiple choice
|
||||||
|
let aEl = a.getElementsByTagName("p")[0];
|
||||||
|
if(!aEl) aEl = a.getElementsByTagName("label")[0];
|
||||||
|
if(!aEl) aEl = a.getElementsByClassName("answernumber")[0].nextElementSibling;
|
||||||
|
let aText = normalize(aEl.innerText);
|
||||||
|
let input = a.getElementsByTagName("input")[0];
|
||||||
|
if(input.type == "hidden") input = a.getElementsByTagName("input")[1];
|
||||||
|
input.checked = answer.includes(aText);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadQuestions() {
|
function loadQuestions() {
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
|
|
||||||
xhr.open("GET", "https://cringe-studios.com/lzk/questions.json");
|
xhr.open("GET", "https://cringe-studios.com/lzk/test-questions.json");
|
||||||
xhr.send();
|
xhr.send();
|
||||||
|
|
||||||
xhr.onload = () => {
|
xhr.onload = () => {
|
||||||
@ -101,11 +119,15 @@ function loadQuestions() {
|
|||||||
let newQAs = {};
|
let newQAs = {};
|
||||||
for(let q in questionAnswers) {
|
for(let q in questionAnswers) {
|
||||||
let ans = questionAnswers[q];
|
let ans = questionAnswers[q];
|
||||||
let newAs = Array.isArray(ans) ? [] : {};
|
if(typeof ans == "string") {
|
||||||
for(let k in ans) {
|
newQAs[normalize(q)] = ans;
|
||||||
newAs[normalize(k)] = normalize(ans[k]);
|
}else {
|
||||||
|
let newAs = Array.isArray(ans) ? [] : {};
|
||||||
|
for(let k in ans) {
|
||||||
|
newAs[normalize(k)] = normalize(ans[k]);
|
||||||
|
}
|
||||||
|
newQAs[normalize(q)] = newAs;
|
||||||
}
|
}
|
||||||
newQAs[normalize(q)] = newAs;
|
|
||||||
}
|
}
|
||||||
questionAnswers = newQAs;
|
questionAnswers = newQAs;
|
||||||
console.log(questionAnswers);
|
console.log(questionAnswers);
|
||||||
|
|||||||
196
lzk/memory.html
Normal file
196
lzk/memory.html
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
|
||||||
|
<title>Memory Game</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.top-buffer { margin-top:20px; }
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<nav class="navbar navbar-expand-sm bg-light">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="#">COSD SPWA</a>
|
||||||
|
</div>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item active">
|
||||||
|
<a class="nav-link btn btn-light" href="#">Start Page</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link btn btn-light active" href="#">Memory Game</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
|
||||||
|
<div ng-app="Game" ng-controller="gameCtrl" class="container">
|
||||||
|
<div class="row row-spacing top-buffer">
|
||||||
|
<div class="col">
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="width: 120px; height: 120px; background-color: {{parkingPositionColor[0]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<!--<img src="http://lorempixel.com/150/150/food">-->
|
||||||
|
<div ng-click="swap('0')" style="width: 120px; height: 120px; background-color: {{gameFieldBG[0]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div ng-click="swap('1')" style="width: 120px; height: 120px; background-color: {{gameFieldBG[1]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="width: 120px; height: 120px; background-color: {{parkingPositionColor[4]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<button type="button" class="btn btn-secondary" ng-click="start()">Start Game</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row row-spacing top-buffer">
|
||||||
|
<div class="col">
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="width: 120px; height: 120px; background-color: {{parkingPositionColor[1]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<!--<img src="http://lorempixel.com/150/150/food">-->
|
||||||
|
<div ng-click="swap('2')" style="width: 120px; height: 120px; background-color: {{gameFieldBG[2]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div ng-click="swap('3')" style="width: 120px; height: 120px; background-color: {{gameFieldBG[3]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<div style="width: 120px; height: 120px; background-color: {{parkingPositionColor[5]}};"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var app = angular.module("Game", []);
|
||||||
|
// creates random number
|
||||||
|
app.service('rand', function(){
|
||||||
|
this.toRand = function(){
|
||||||
|
var x = Math.random() * 3;
|
||||||
|
var t = Math.round(x);
|
||||||
|
return t;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller("gameCtrl", function($scope, rand){
|
||||||
|
$scope.needsStart = true;
|
||||||
|
$scope.counter = 0;
|
||||||
|
// holds background game images in parking positions
|
||||||
|
$scope.parkingPositionColor = ["#FF4233","#F9FF33"];
|
||||||
|
// shows whether or not parking position occupied by game image
|
||||||
|
$scope.parkingPositionOI = [true,true];
|
||||||
|
// holds background values for game area. Default #aaa. Changes to game image
|
||||||
|
$scope.gameFieldBG = ["#aaa","#aaa","#aaa","#aaa"];
|
||||||
|
// Positions of game images after game start. Initially covered by corresponding gameFieldBG an replaced on click
|
||||||
|
$scope.gameFieldV = ["#aaa","#aaa","#aaa","#aaa"];
|
||||||
|
// Indicates whether game image in given position is set
|
||||||
|
$scope.gameFieldVOI = [false,false,false,false];
|
||||||
|
// Holds positions of previously selected game images for comparison. Default -1. Size 2
|
||||||
|
$scope.gameImgSel = [-1,-1];
|
||||||
|
$scope.temp = "";
|
||||||
|
// responds to click events in the gaming area - main gaming function
|
||||||
|
$scope.swap = function(x){
|
||||||
|
if($scope.counter == 2){
|
||||||
|
$scope.reset("#aaa");
|
||||||
|
console.log('Counter is 2 - reset to grey');
|
||||||
|
}
|
||||||
|
$scope.temp = $scope.gameFieldBG[x];
|
||||||
|
if($scope.temp === "#aaa"){
|
||||||
|
$scope.gameFieldBG[x] = $scope.gameFieldV[x];
|
||||||
|
$scope.gameImgSel[$scope.counter] = x;
|
||||||
|
$scope.counter++;
|
||||||
|
console.log('Set color for index: ' + x);
|
||||||
|
console.log(' color arr ' + $scope.gameFieldV);
|
||||||
|
}
|
||||||
|
// compare two game images
|
||||||
|
if($scope.counter == 2){
|
||||||
|
if($scope.gameFieldBG[$scope.gameImgSel[0]] == $scope.gameFieldBG[$scope.gameImgSel[1]]){
|
||||||
|
var t = $scope.getParkingPosition();
|
||||||
|
$scope.parkingPositionOI[t] = true;
|
||||||
|
$scope.parkingPositionColor[t] = $scope.gameFieldBG[x];
|
||||||
|
$scope.reset("#abb");
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
//starts the game - populates game fields, resets parking positions, updates bookkeeping arrays
|
||||||
|
$scope.start = function() {
|
||||||
|
var t = $scope.getParkingPosition();
|
||||||
|
if(t == -1){
|
||||||
|
$scope.gameFieldBG = ["#aaa","#aaa","#aaa","#aaa"];
|
||||||
|
$scope.gameFieldV = ["#aaa","#aaa","#aaa","#aaa"];
|
||||||
|
$scope.gameFieldVOI = [false,false,false,false];
|
||||||
|
$scope.needsStart = true;
|
||||||
|
}
|
||||||
|
if($scope.needsStart){
|
||||||
|
for(i = 0; i < $scope.parkingPositionColor.length; i++){
|
||||||
|
$scope.setFieldV(i);
|
||||||
|
$scope.setFieldV(i);
|
||||||
|
$scope.parkingPositionColor[i] = "#abb";
|
||||||
|
$scope.parkingPositionOI[i] = false;
|
||||||
|
}
|
||||||
|
$scope.needsStart = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// sets the value for one game area cell
|
||||||
|
$scope.setFieldV = function(i) {
|
||||||
|
var x = rand.toRand();
|
||||||
|
console.log('Position occupied: ' + x);
|
||||||
|
if($scope.gameFieldVOI[x]){
|
||||||
|
while(true){
|
||||||
|
var y = rand.toRand();
|
||||||
|
console.log('New Position: ' + y);
|
||||||
|
if(!$scope.gameFieldVOI[y]){
|
||||||
|
$scope.gameFieldV[y] = $scope.parkingPositionColor[i];
|
||||||
|
$scope.gameFieldVOI[y] = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$scope.gameFieldV[x] = $scope.parkingPositionColor[i];
|
||||||
|
$scope.gameFieldVOI[x] = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// resets state after two cells clicked during the game
|
||||||
|
$scope.reset = function(color){
|
||||||
|
$scope.counter = 0;
|
||||||
|
$scope.gameFieldBG[$scope.gameImgSel[0]] = color;
|
||||||
|
$scope.gameFieldBG[$scope.gameImgSel[1]] = color;
|
||||||
|
$scope.gameImgSel = [-1,-1];
|
||||||
|
}
|
||||||
|
// returns first available parking position
|
||||||
|
$scope.getParkingPosition = function(){
|
||||||
|
var x = -1;
|
||||||
|
for(i = 0; i < $scope.parkingPositionOI.length; i++){
|
||||||
|
console.log('Parking Position val: ' + $scope.parkingPositionOI[i]);
|
||||||
|
if(!$scope.parkingPositionOI[i]){
|
||||||
|
x = i;
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return x;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
143
lzk/questions copy.json
Normal file
143
lzk/questions copy.json
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
{
|
||||||
|
"What is the correct tag for the largest heading in HTML?": ["<h1>"],
|
||||||
|
"What are semantic HTML elements?": ["Elements with meanings which allow a reader of the document to understand the meaning of the element"],
|
||||||
|
"The class attribute is defined as following:": ["class=\"name\""],
|
||||||
|
"The class Attribute is used to devide different into logical groups": ["elements"],
|
||||||
|
"What is the \"alt\" - Attribute for?": [
|
||||||
|
"It is used to display information about an element when the content cannot be displayed or loaded by the browser.",
|
||||||
|
"Disabled people can access the information of an element, which they wouldn't be able to understand due to their disabilities."
|
||||||
|
],
|
||||||
|
"The classname is": ["case sensitive"],
|
||||||
|
"Link the positions to corresponding persons.": {
|
||||||
|
"Who is W3C CEO?": "Jeffrey Jaffe",
|
||||||
|
"Who is W3C director?": "Who is W3C director?"
|
||||||
|
},
|
||||||
|
"An iframe is an element which is used to display a webpage within a web page. Is this statement true or false?": ["True"],
|
||||||
|
"URLs are used to define the to a destination site or to a ressource needed in the HTML file.": ["path"],
|
||||||
|
"What is the charset meta declaration used for?": ["It defines the character encoding of a document so that the browser can interpret it properly."],
|
||||||
|
"Choose how ids are referenced in CSS.": ["#idname"],
|
||||||
|
"Which of the following statements are true?": [
|
||||||
|
"With Javascript you can create new elements.",
|
||||||
|
"You can include a Javascript file at the end of the HTML body.",
|
||||||
|
"With the <noscript> tag you provide alternate content for users who disabled Javascript",
|
||||||
|
"The code document.getElementById(\"demo\").innterHTML = \"Hello JavaScript!\"; selects an element with the name \"demo\" and changes its text to \"Hello Javascript\"",
|
||||||
|
"Javascript can be used to change the css of an element."
|
||||||
|
],
|
||||||
|
"In some cases IDs should be used more than once. Is this statement true or false?": ["False"],
|
||||||
|
"An inline CSS is used to apply a unique style to HTML element.\nAn internal CSS is used to define a style for HTML .\nAn external style sheet is used to define the style for HTML .": [
|
||||||
|
"a single", "element", "a single", "a page", "many", "pages"
|
||||||
|
],
|
||||||
|
"Who develops the different standards for the Open Web Platform?": ["W3 Consortium (W3C)"],
|
||||||
|
"Who is responsible for HTML standards?": ["W3 Consortium (W3C)"],
|
||||||
|
"What does the abbreviation CSS mean?": ["Cascading Style Sheets"],
|
||||||
|
"What is the entity for?": ["Introduces a non-breaking space."],
|
||||||
|
"In HTML each element must have an ID. Is this statement true or false?": ["False"],
|
||||||
|
"What is new in HTML5? Select all corresponding answers.": [
|
||||||
|
"New multimedia element <audio>",
|
||||||
|
"New semantic elements like <header>, <footer>, <article>, and <section>.",
|
||||||
|
"New types for form input elements like time and date.",
|
||||||
|
"New multimedia element <video>",
|
||||||
|
"New types for form input elements like number.",
|
||||||
|
"New graphic elements: <svg> and <canvas>."
|
||||||
|
],
|
||||||
|
"An HTML page can have id(s) applied to one specific element, while a class name can be applied to elements.": ["one unique", "multiple"],
|
||||||
|
"An HTML page can have one unique id(s) applied to one specific element, while a class name can be applied to multiple elements.": ["False"],
|
||||||
|
"Match the tags to the fitting type.\n<ol>, <table>, <ul> \n<style> \n<i>, <strong>, <b> ": ["block elements", " CSS formatting", "text formatting"],
|
||||||
|
"What is the basic syntax of HTML tags that need one attribute?": ["<tagName attributeName=\"value\">content</tagName>"],
|
||||||
|
"What does the abbreviation HTML mean?": ["Hyper Text Markup Language"],
|
||||||
|
"What do you need as a preparation for coding HTML?": [
|
||||||
|
"A basic texteditor or an IDE.",
|
||||||
|
"A computer or a similar input device.",
|
||||||
|
"A webbrowser to display the results."
|
||||||
|
],
|
||||||
|
"What is the latest and recommended HTML5 version number?": ["HTML 5.2"],
|
||||||
|
"The form-handler is typically a server page with a script for processing input data. Is this statement true or false?": ["True"],
|
||||||
|
"Select all valid HTML elements.": [
|
||||||
|
"<a>",
|
||||||
|
"<abbr>",
|
||||||
|
"<h4>",
|
||||||
|
"<em>",
|
||||||
|
"<del>",
|
||||||
|
"<bdo>"
|
||||||
|
],
|
||||||
|
"Which attribute opens the action url in a new browser tab?": ["target=\"_blank\""],
|
||||||
|
"The Method is used to transfer form input which is sensitive and shouldn't be displayed open.\nThe Method is used to transfer form input in plaintext over the URL.": ["POST", "GET"],
|
||||||
|
"What is the correct tag for a line break in HTML?": ["<br>"],
|
||||||
|
"Select all statements which are true about the HTML canvas tag.": [
|
||||||
|
"You must use JavaScript to actually draw the graphics.",
|
||||||
|
"The HTML <canvas> elements is used to draw graphics",
|
||||||
|
"The code\nvar c = document.getElementById(\"myCanvas\");\nvar ctx = c.getContext(\"2d\");\nctx.beginPath();\nctx.arc(95,50,30,0,2*Math.PI);\nctx.stroke\ndraws a circle",
|
||||||
|
"The <canvas> element is only a container for graphics.",
|
||||||
|
"By default, a canvas has no border and no content."
|
||||||
|
],
|
||||||
|
"The HTML <body> element is used to store <style> and <link> elements. Is this statement true or false?": ["False"],
|
||||||
|
"Select all elements which should be in the head tag.": ["<title>", "<meta>", "<style>", "<link>"],
|
||||||
|
"Combine the tags to their purpose.": {
|
||||||
|
"<var>": "various text",
|
||||||
|
"<pre>": "preformated text",
|
||||||
|
"<code>": "used for program code",
|
||||||
|
"<kbd>": "denotes keyboard input",
|
||||||
|
"<samp>": "used for sample computer output"
|
||||||
|
},
|
||||||
|
"Select all contributions which contribute to an elements bounding box (pixel size) in the box model.": ["Height", "Width", "Border", "Padding"],
|
||||||
|
"The title tag specifies additional information about an element, which is often shown as a tooltip when the mouse moves over an element. Is this statement true or false?": [
|
||||||
|
"False"
|
||||||
|
],
|
||||||
|
"Choose 3 ways to specify a color in HTML or CSS.": [
|
||||||
|
"style=\"color:green\"",
|
||||||
|
"style=\"color:#ff6347\"",
|
||||||
|
"style=\"color:rgb(255, 99, 71)\""
|
||||||
|
],
|
||||||
|
"By whom Web Standards are made?": ["W3C", "World Wide Web Consortium"],
|
||||||
|
"How does the definition of the doctype of an HTML5 document look like?": ["<!DOCTYPE html>"],
|
||||||
|
"XHTML is a combination of the strength of both XML and HTML to allow browser to interpret the document more efficiently. Is this statement true or false?": ["True"],
|
||||||
|
"Select the right expression to introduce a special character using its entity number in your HTML code.": ["&#"],
|
||||||
|
"How a CSS class may be used?": [".classname"],
|
||||||
|
"Which input type does not exist?": [
|
||||||
|
"textfield",
|
||||||
|
"key",
|
||||||
|
"age",
|
||||||
|
"picture"
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
"Welche Aussage(n) ist/sind für JavaScript richtig?": ["JavaScript wird von einem Interpreter ausgeführt, es gibt keinen JavaScript-Compiler."],
|
||||||
|
"Wie werden in JavaScript globale Variablen deklariert?": "x = 5; oder deklaration im globalen Kontext.",
|
||||||
|
"Über welche Methode kann man im HTML-DOM einen neuen Knoten duplizieren?": "cloneNode()",
|
||||||
|
"Wie bezeichnet man einen Knoten im HTML-DOM ohne Kindknoten?": "Blatt Knoten",
|
||||||
|
"Nennen Sie zwei JavaScript-Trigger.": "onFocus, onBlur",
|
||||||
|
"Nennen Sie drei Beispiele für den Einsatz von JavaScript.": "Formvalidierung, dymanische Funktionen, Kommunikation zu einem Server",
|
||||||
|
"Wie heißt der Parentnode des Titel-Knotens eines HTML-DOMs ?": "head",
|
||||||
|
"Wozu benötigt man den JavaScript-Operator \"===\"?": "Vergleich von Attributwert und Datentyp zweier Variablen",
|
||||||
|
"Über welche Methode kann man im HTML-DOM prüfen,ob ein Knoten Kindknoten besitzt ?": "hasChildNodes()",
|
||||||
|
"Durch welches Tag wird der Wurzelknoten eines HTML-Dokuments im HTML-DOM bestimmt ?": "html",
|
||||||
|
"Über welches Attribut im HTML-DOM hat man Zugriff auf alle Attribute eines Elements ?": "attributes",
|
||||||
|
"Über welche Methode kann man im HTML-DOM einen neuen Kindknoten einfügen ?": "appendChild()",
|
||||||
|
"Über welche Eigenschaft kann im HTML DOM kann der Wert des Textknotens manipuliert werden ?": "nodeValue",
|
||||||
|
"Welche Aussage(n) ist/sind für AJAX rightig?": ["AJAX unterstützt den Datenaustausch mit einem Server und die Teile einer Webseite auszutauschen, ohne die gesamte Seite neu zu laden."],
|
||||||
|
"Wie vermeidet man, dass Browser, die kein JavaScript unterstützen, JavaScript als Seiteninhalte darstellen?": "Script in einen HTML-Comment einbetten",
|
||||||
|
"Wie viele Kindknoten darf ein Knoten im HTML-DOM maximal besitzen ?": "es gibt kein Maximum. Beliebig viele",
|
||||||
|
"Benennen Sie alle Childnodes des Wurzelknotens eines HTML-DOMs.": "head und body",
|
||||||
|
"Mit welcher JavaScript-Kontrollstruktur kann man Fallunterscheidungen von mehr als drei Fällen implementieren, ohne if-Blöcke zu nutzen?": "Switch-Statement",
|
||||||
|
"Welche Aussagen sind für das HTML Document Object Model zutreffend ? Kreuzen Sie alle richtigen Antworten !": ["Das HTML DOM ist ein Standard um HTML-Elemente zu lesen, ändern, hinzuzufügen und zu löschen.", "Das HTML DOM definiert die Objekte und Eigenschaften aller HTML-Elemente des Dokuments und Methoden, auf diese zuzugreifen."],
|
||||||
|
"Mit welchem JavaScript-Befehl kann in einem HTML-Dokument einem HTML-Element mit der ID=\"demo\" der Text \"Hallo Welt!\" zugewiesen werden?": "document.getElementById(\"demo\").innerHTML=\"Hallo Welt!\"",
|
||||||
|
|
||||||
|
|
||||||
|
"Welche der nachfolgenden jQuery-Methoden gibt es ?\n": ["jquery.getJSON()", "jquery.getScript()"],
|
||||||
|
"Mit Hilfe eines jQuery-Selektors wurde eine Menge von HTML-Elementen selektiert.\n\n\nMit welcher jQuery-Methode kann man die als Parameter \u00fcbergebenen CSS-Klassen der ausgew\u00e4hlten Elemente setzen bzw. entfernen, je nachdem, ob sie gesetzt waren oder nicht ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": "",
|
||||||
|
"Mit welcher jQuery-Methode kann man die H\u00f6he des ersten ausgew\u00e4hlten Elements setzen bzw. abrufen, wobei Padding (padding) mit ber\u00fccksichtigt werden soll, nicht aber die Randlinie (border) ?\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": "innerHeight()",
|
||||||
|
"Wie lange dauert das jQuery-FadeIn in Millisekunden in der Voreinstellung ?\n": "400",
|
||||||
|
"Welche Aussage(n) ist\/sind im Zusammenhang mit jQuery richtig?\n\n\n": ["JQuery 2.x.x unterstützt nicht mehr Internet Explorer 6, 7 und 8.", "QUnit is a test automation framework used to test the jQuery project."],
|
||||||
|
"Welche Aussage(n) ist\/sind im Zusammenhang mit jQuery richtig?\n\n\n": ["JQuery stellt ein browser\u00fcbergreifendes AJAX-API bereit.", "JQuery ist erweiterbar."],
|
||||||
|
"Welche Aussage ist f\u00fcr das nachfolgende jQuery-Schnipsel richtig?\n\nvar hB = $(\"#banner-message\");\n$(\"#container button\").on(\"click\",function( event ){hB.show();});": ["Zeige das #banner-message Element, das mit \"display:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container\" bet\u00e4tigt wird."],
|
||||||
|
"Gegeben sei eine nachfolgende HTML Seite mit einer ungeordneten Liste:\n\n<html>\n<body>\n\n<ul>\n <li>list item 1<\/li>\n <li>list item 2<\/li>\n <li>list item 3<\/li>\n<\/ul>\n<\/body>\n<\/html>\n\n\n\n\nMit dem Selektor $(\"li\") wurden alle Listenelemente selektiert.\n\nMit welcher jQuery-Methode kann man die selektierte Menge auf das erste Listenelement reduzieren ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": ".first()",
|
||||||
|
"Which of the following statements are true about AngularJS ? (Choose all that apply.)\n": ["Imperative programming is suited to defining an AngularJS application's business logic."],
|
||||||
|
"Which of the following paradigms are true for AngularJS? (Choose all that apply.)": ["Decouple the server side of an application from the client side.", "Decouple view manipulation from application logic."],
|
||||||
|
"Which of the following statements are true about AngularJS ? (Choose all that apply.)": ["AngularJS provides a framework for model-view-viewmodel (MVVM) architectures.", "AngularJS provides a framework for client-side model-view-controller (MVC) architectures."],
|
||||||
|
"Which AngularJS function creates an AngularJS module?": "angular.module()",
|
||||||
|
"Which AngularJS directive binds the value of HTML controls (input, select, textarea) to application data?": ["ng-model"],
|
||||||
|
"Which of the following implementation details are true for AngularJS? (Choose all that apply.)": ["AngularJS uses dependency injection.", "Angular brings server-side services to client-side web applications."],
|
||||||
|
"Which of the following statements are true? (Choose all that apply.)": ["AngularJS lets you use HTML as your template language.", "AngularJS is a structural framework for dynamic web apps."],
|
||||||
|
"Which AngularJS directive binds application data to the innerHTML view?": "ng-bind",
|
||||||
|
"The code shows the implementation of a simple memory game. Copy the code to a local file. Modify the code such that the game area is not 4x4 but only 2x2. Upload your file to be graded!": "https://cringe-studios.com/lonk.sus"
|
||||||
|
}
|
||||||
44
lzk/questions-log copy 2.json
Executable file
44
lzk/questions-log copy 2.json
Executable file
@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"Welche der nachfolgenden jQuery-Methoden gibt es ?\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. query.get()",
|
||||||
|
"b. jquery.getText()",
|
||||||
|
"c. jquery.getXML()",
|
||||||
|
"d. jquery.ajaxCompleted()",
|
||||||
|
"e. jquery.getJSON()",
|
||||||
|
"f. jquery.getScript()"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Mit Hilfe eines jQuery-Selektors wurde eine Menge von HTML-Elementen selektiert.\n\n\nMit welcher jQuery-Methode kann man die als Parameter \u00fcbergebenen CSS-Klassen der ausgew\u00e4hlten Elemente setzen bzw. entfernen, je nachdem, ob sie gesetzt waren oder nicht ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Mit welcher jQuery-Methode kann man die H\u00f6he des ersten ausgew\u00e4hlten Elements setzen bzw. abrufen, wobei Padding (padding) mit ber\u00fccksichtigt werden soll, nicht aber die Randlinie (border) ?\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Wie lange dauert das jQuery-FadeIn in Millisekunden in der Voreinstellung ?\n": {
|
||||||
|
"type": "Single-line text input",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Welche Aussage(n) ist\/sind im Zusammenhang mit jQuery richtig?\n\n\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. Die Manipulation von HTML-Elementen l\u00e4sst sich ausschlie\u00dflich mit jQuery durchf\u00fchren.",
|
||||||
|
"b. JQuery stellt ein browser\u00fcbergreifendes AJAX-API bereit.",
|
||||||
|
"c. JQuery ist erweiterbar."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Welche Aussage ist f\u00fcr das nachfolgende jQuery-Schnipsel richtig?\n\nvar hB = $(\"#banner-message\");\n$(\"#container button\").on(\"click\",function( event ){hB.show();});": {
|
||||||
|
"type": "Multiple choice (einzeln)",
|
||||||
|
"answers": [
|
||||||
|
"a. Zeige das #banner-message Element, das mit \"display:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container\" bet\u00e4tigt wird.",
|
||||||
|
"b. Zeige das \"#banner-message\" Element, das mit \"visibility:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container button\" bet\u00e4tigt wird."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Gegeben sei eine nachfolgende HTML Seite mit einer ungeordneten Liste:\n\n<html>\n<body>\n\n<ul>\n <li>list item 1<\/li>\n <li>list item 2<\/li>\n <li>list item 3<\/li>\n<\/ul>\n<\/body>\n<\/html>\n\n\n\n\nMit dem Selektor $(\"li\") wurden alle Listenelemente selektiert.\n\nMit welcher jQuery-Methode kann man die selektierte Menge auf das erste Listenelement reduzieren ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
107
lzk/questions-log copy.json
Executable file
107
lzk/questions-log copy.json
Executable file
@ -0,0 +1,107 @@
|
|||||||
|
{
|
||||||
|
"Welche Aussage(n) ist\/sind f\u00fcr JavaScript richtig?\n\n\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. JavaScript wird von einem Interpreter ausgef\u00fchrt, es gibt keinen JavaScript-Compiler.",
|
||||||
|
"b. JavaScript ist eine Implementation des EAMC Skriptsprachen Standards."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Welche Aussage(n) ist\/sind f\u00fcr AJAX richtig?\n\n\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. AJAX == Asynchronous Java and XML.",
|
||||||
|
"b. AJAX unterst\u00fctzt den Datenaustausch mit einem Server und die Teile einer Webseite auszutauschen, ohne die gesamte Seite neu zu laden.",
|
||||||
|
"c. AJAX\u2013Anwendungen sind abh\u00e4ngig von Browser und Plattform."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Welche Aussagen sind f\u00fcr das HTML Docoment Object Model zutreffend ? Kreuzen Sie alle richtigen Antworten an !\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. Das HTML DOM ist ein JavaScript-Standard um HTML-Elemente zu modifizieren.",
|
||||||
|
"b. Das HTML DOM ist ein Standard um HTML-Elemente zu lesen, \u00e4ndern, hinzuzuf\u00fcgen und zu l\u00f6schen.",
|
||||||
|
"c. Das HTML DOM ist das Root-Objekt f\u00fcr die Objekte und Eigenschaften aller HTML-Elemente des Dokuments.",
|
||||||
|
"d.\nDas HTML DOM definiert die Objekte und Eigenschaften aller HTML-Elemente des Dokuments und Methoden, um auf diese zuzugreifen."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Answer is \"A\"\n": {
|
||||||
|
"type": "Multiple choice (einzeln)",
|
||||||
|
"answers": [
|
||||||
|
"A\n",
|
||||||
|
"D\n",
|
||||||
|
"C\n",
|
||||||
|
"B\n"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Is\n\n\n0 == true\n\nor\n\n\n0 == false?\n": {
|
||||||
|
"type": "Multiple choice (einzeln)",
|
||||||
|
"answers": [
|
||||||
|
"Wahr",
|
||||||
|
"Falsch"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Choose\n": {
|
||||||
|
"type": "Zuordnung",
|
||||||
|
"answers": {
|
||||||
|
"Choose \"C\"\n": [
|
||||||
|
"Ausw\u00e4hlen ...",
|
||||||
|
"B",
|
||||||
|
"C",
|
||||||
|
"A"
|
||||||
|
],
|
||||||
|
"Choose \"A\"\n": [
|
||||||
|
"Ausw\u00e4hlen ...",
|
||||||
|
"B",
|
||||||
|
"C",
|
||||||
|
"A"
|
||||||
|
],
|
||||||
|
"Choose \"B\"\n": [
|
||||||
|
"Ausw\u00e4hlen ...",
|
||||||
|
"B",
|
||||||
|
"C",
|
||||||
|
"A"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"The impostor is ___ and ___ .Crewmates are ___ and ___ .": {
|
||||||
|
"type": "L\u00fcckentext",
|
||||||
|
"answers": [
|
||||||
|
[
|
||||||
|
"\u00a0",
|
||||||
|
"very nice",
|
||||||
|
"sus"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"\u00a0",
|
||||||
|
"a sussy baka",
|
||||||
|
"innocent"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"\u00a0",
|
||||||
|
"very nice",
|
||||||
|
"sus"
|
||||||
|
],
|
||||||
|
[
|
||||||
|
"\u00a0",
|
||||||
|
"a sussy baka",
|
||||||
|
"innocent"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Choose \"Yay\", \"Woo\" and \"Sus\"": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"Sus\n",
|
||||||
|
"Yay\n",
|
||||||
|
"Woo\n",
|
||||||
|
"Test\n",
|
||||||
|
"Amogus\n"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Very weird formatting, but the answer is sus": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"The correct code is let a = \"sus\"; console.log(a);.\n",
|
||||||
|
"The correct code is console.log(\"amogus\");.\n"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1 +1,87 @@
|
|||||||
{}
|
{
|
||||||
|
"Welche der nachfolgenden jQuery-Methoden gibt es ?\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. query.get()",
|
||||||
|
"b. jquery.getText()",
|
||||||
|
"c. jquery.getXML()",
|
||||||
|
"d. jquery.ajaxCompleted()",
|
||||||
|
"e. jquery.getJSON()",
|
||||||
|
"f. jquery.getScript()"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Mit Hilfe eines jQuery-Selektors wurde eine Menge von HTML-Elementen selektiert.\n\n\nMit welcher jQuery-Methode kann man die als Parameter \u00fcbergebenen CSS-Klassen der ausgew\u00e4hlten Elemente setzen bzw. entfernen, je nachdem, ob sie gesetzt waren oder nicht ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Mit welcher jQuery-Methode kann man die H\u00f6he des ersten ausgew\u00e4hlten Elements setzen bzw. abrufen, wobei Padding (padding) mit ber\u00fccksichtigt werden soll, nicht aber die Randlinie (border) ?\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Wie lange dauert das jQuery-FadeIn in Millisekunden in der Voreinstellung ?\n": {
|
||||||
|
"type": "Single-line text input",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Welche Aussage(n) ist\/sind im Zusammenhang mit jQuery richtig?\n\n\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"a. Die Manipulation von HTML-Elementen l\u00e4sst sich ausschlie\u00dflich mit jQuery durchf\u00fchren.",
|
||||||
|
"b. JQuery stellt ein browser\u00fcbergreifendes AJAX-API bereit.",
|
||||||
|
"c. JQuery ist erweiterbar."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Welche Aussage ist f\u00fcr das nachfolgende jQuery-Schnipsel richtig?\n\nvar hB = $(\"#banner-message\");\n$(\"#container button\").on(\"click\",function( event ){hB.show();});": {
|
||||||
|
"type": "Multiple choice (einzeln)",
|
||||||
|
"answers": [
|
||||||
|
"a. Zeige das #banner-message Element, das mit \"display:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container\" bet\u00e4tigt wird.",
|
||||||
|
"b. Zeige das \"#banner-message\" Element, das mit \"visibility:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container button\" bet\u00e4tigt wird."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Gegeben sei eine nachfolgende HTML Seite mit einer ungeordneten Liste:\n\n<html>\n<body>\n\n<ul>\n <li>list item 1<\/li>\n <li>list item 2<\/li>\n <li>list item 3<\/li>\n<\/ul>\n<\/body>\n<\/html>\n\n\n\n\nMit dem Selektor $(\"li\") wurden alle Listenelemente selektiert.\n\nMit welcher jQuery-Methode kann man die selektierte Menge auf das erste Listenelement reduzieren ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": {
|
||||||
|
"type": "Text Input (qtype_pmatch \/ Essay)",
|
||||||
|
"answers": ""
|
||||||
|
},
|
||||||
|
"Which of the following statements are true about AngularJS ? (Choose all that apply.)\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"AngularJS provides a framework for model\u2013view\u2013viewmodel (MVVM) architectures.",
|
||||||
|
"AngularJS provides a framework for client-side model\u2013view\u2013controller (MVC) architectures.",
|
||||||
|
"AngularJS provides a framework for serverside model\u2013view\u2013viewmodel (MVVM) architectures.",
|
||||||
|
"AngularJS provides components commonly used in poor Internet applications."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Which AngularJS directive binds the value of HTML controls (input, select, textarea) to application data?\n": {
|
||||||
|
"type": "Multiple choice (einzeln)",
|
||||||
|
"answers": [
|
||||||
|
"ng-controller",
|
||||||
|
"ng-app",
|
||||||
|
"ng-model",
|
||||||
|
"ng-bind"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Which of the following implementation details are true for AngularJS? (Choose all that apply.)\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"AngularJS uses dependency injection.",
|
||||||
|
"Angular brings client-side services to server-side web applications.",
|
||||||
|
"AngularJS uses independent injection.",
|
||||||
|
"Angular brings server-side services to client-side web applications."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Which of the following statements are true? (Choose all that apply.)\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"AngularJS is a framework for building client applications in JavaScript and the language TypeScript that transpiles to EC07.",
|
||||||
|
"AngularJS lets you use HTML as your template language.",
|
||||||
|
"AngularJS is a structural framework for dynamic web apps.",
|
||||||
|
"AngularJS is a framework for building client applications in HTML and the language TypoScript that transpiles to EC07."
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"Which of the following statements are true for AngularJS? (Choose all that apply.)\n": {
|
||||||
|
"type": "Multiple choice (mehrfach)",
|
||||||
|
"answers": [
|
||||||
|
"Descriptive programming should be used to create user interfaces and connect software components.",
|
||||||
|
"Imperative programming is suited to defining an AngularJS application's business logic."
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -39,7 +39,7 @@ function saveQuestion() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
let answersEl = form.getElementsByClassName("answer")[0];
|
let answersEl = form.getElementsByClassName("answer")[0];
|
||||||
if(answersEl) {
|
e: if(answersEl) {
|
||||||
if(answersEl.tagName == "TABLE") {
|
if(answersEl.tagName == "TABLE") {
|
||||||
answers = {};
|
answers = {};
|
||||||
type = "Zuordnung";
|
type = "Zuordnung";
|
||||||
@ -52,20 +52,36 @@ function saveQuestion() {
|
|||||||
}
|
}
|
||||||
answers[tx] = ops;
|
answers[tx] = ops;
|
||||||
}
|
}
|
||||||
}else {
|
break e;
|
||||||
let isMultiple = false;
|
|
||||||
for(let a of answersEl.children) {
|
|
||||||
let input = a.getElementsByTagName("input")[0];
|
|
||||||
if(input.type == "hidden") input = a.getElementsByTagName("input")[1];
|
|
||||||
if(input.type == "checkbox") isMultiple = true;
|
|
||||||
|
|
||||||
let aEl = a.getElementsByTagName("p")[0];
|
|
||||||
if(!aEl) aEl = a.getElementsByTagName("label")[0];
|
|
||||||
if(!aEl) aEl = a.getElementsByClassName("answernumber")[0].nextElementSibling;
|
|
||||||
answers.push(aEl.innerText);
|
|
||||||
}
|
|
||||||
type = isMultiple ? "Multiple choice (mehrfach)" : "Multiple choice (einzeln)";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let areas = answersEl.getElementsByTagName("textarea");
|
||||||
|
if(areas.length > 0) {
|
||||||
|
type = "Text Input (qtype_pmatch / Essay)";
|
||||||
|
answers = "";
|
||||||
|
break e;
|
||||||
|
}
|
||||||
|
|
||||||
|
let inputs = answersEl.getElementsByTagName("input");
|
||||||
|
if(inputs.length > 0 && inputs[0].type == "text") {
|
||||||
|
type = "Single-line text input";
|
||||||
|
answers = "";
|
||||||
|
break e;
|
||||||
|
}
|
||||||
|
|
||||||
|
let isMultiple = false;
|
||||||
|
for(let a of answersEl.children) {
|
||||||
|
let input = a.getElementsByTagName("input")[0];
|
||||||
|
|
||||||
|
if(input.type == "hidden") input = a.getElementsByTagName("input")[1];
|
||||||
|
if(input.type == "checkbox") isMultiple = true;
|
||||||
|
|
||||||
|
let aEl = a.getElementsByTagName("p")[0];
|
||||||
|
if(!aEl) aEl = a.getElementsByTagName("label")[0];
|
||||||
|
if(!aEl) aEl = a.getElementsByClassName("answernumber")[0].nextElementSibling;
|
||||||
|
answers.push(aEl.innerText);
|
||||||
|
}
|
||||||
|
type = isMultiple ? "Multiple choice (mehrfach)" : "Multiple choice (einzeln)";
|
||||||
}
|
}
|
||||||
|
|
||||||
let xhr = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
"The classname is": ["case sensitive"],
|
"The classname is": ["case sensitive"],
|
||||||
"Link the positions to corresponding persons.": {
|
"Link the positions to corresponding persons.": {
|
||||||
"Who is W3C CEO?": "Jeffrey Jaffe",
|
"Who is W3C CEO?": "Jeffrey Jaffe",
|
||||||
"Who is W3C director?": "Who is W3C director?"
|
"Who is W3C director?": "Tim Berners-Lee"
|
||||||
},
|
},
|
||||||
"An iframe is an element which is used to display a webpage within a web page. Is this statement true or false?": ["True"],
|
"An iframe is an element which is used to display a webpage within a web page. Is this statement true or false?": ["True"],
|
||||||
"URLs are used to define the to a destination site or to a ressource needed in the HTML file.": ["path"],
|
"URLs are used to define the to a destination site or to a ressource needed in the HTML file.": ["path"],
|
||||||
@ -98,5 +98,44 @@
|
|||||||
"key",
|
"key",
|
||||||
"age",
|
"age",
|
||||||
"picture"
|
"picture"
|
||||||
]
|
],
|
||||||
}
|
|
||||||
|
|
||||||
|
"Welche Aussage(n) ist/sind für JavaScript richtig?": ["JavaScript wird von einem Interpreter ausgeführt, es gibt keinen JavaScript-Compiler."],
|
||||||
|
"Wie werden in JavaScript globale Variablen deklariert?": "x = 5; oder deklaration im globalen Kontext.",
|
||||||
|
"Über welche Methode kann man im HTML-DOM einen neuen Knoten duplizieren?": "cloneNode()",
|
||||||
|
"Wie bezeichnet man einen Knoten im HTML-DOM ohne Kindknoten?": "Blatt Knoten",
|
||||||
|
"Nennen Sie zwei JavaScript-Trigger.": "onFocus, onBlur",
|
||||||
|
"Nennen Sie drei Beispiele für den Einsatz von JavaScript.": "Formvalidierung, dymanische Funktionen, Kommunikation zu einem Server",
|
||||||
|
"Wie heißt der Parentnode des Titel-Knotens eines HTML-DOMs ?": "head",
|
||||||
|
"Wozu benötigt man den JavaScript-Operator \"===\"?": "Vergleich von Attributwert und Datentyp zweier Variablen",
|
||||||
|
"Über welche Methode kann man im HTML-DOM prüfen,ob ein Knoten Kindknoten besitzt ?": "hasChildNodes()",
|
||||||
|
"Durch welches Tag wird der Wurzelknoten eines HTML-Dokuments im HTML-DOM bestimmt ?": "html",
|
||||||
|
"Über welches Attribut im HTML-DOM hat man Zugriff auf alle Attribute eines Elements ?": "attributes",
|
||||||
|
"Über welche Methode kann man im HTML-DOM einen neuen Kindknoten einfügen ?": "appendChild()",
|
||||||
|
"Über welche Eigenschaft kann im HTML DOM kann der Wert des Textknotens manipuliert werden ?": "nodeValue",
|
||||||
|
"Welche Aussage(n) ist/sind für AJAX rightig?": ["AJAX unterstützt den Datenaustausch mit einem Server und die Teile einer Webseite auszutauschen, ohne die gesamte Seite neu zu laden."],
|
||||||
|
"Wie vermeidet man, dass Browser, die kein JavaScript unterstützen, JavaScript als Seiteninhalte darstellen?": "Script in einen HTML-Comment einbetten",
|
||||||
|
"Wie viele Kindknoten darf ein Knoten im HTML-DOM maximal besitzen ?": "es gibt kein Maximum. Beliebig viele",
|
||||||
|
"Benennen Sie alle Childnodes des Wurzelknotens eines HTML-DOMs.": "head und body",
|
||||||
|
"Mit welcher JavaScript-Kontrollstruktur kann man Fallunterscheidungen von mehr als drei Fällen implementieren, ohne if-Blöcke zu nutzen?": "Switch-Statement",
|
||||||
|
"Welche Aussagen sind für das HTML Document Object Model zutreffend ? Kreuzen Sie alle richtigen Antworten !": ["Das HTML DOM ist ein Standard um HTML-Elemente zu lesen, ändern, hinzuzufügen und zu löschen.", "Das HTML DOM definiert die Objekte und Eigenschaften aller HTML-Elemente des Dokuments und Methoden, auf diese zuzugreifen."],
|
||||||
|
"Mit welchem JavaScript-Befehl kann in einem HTML-Dokument einem HTML-Element mit der ID=\"demo\" der Text \"Hallo Welt!\" zugewiesen werden?": "document.getElementById(\"demo\").innerHTML=\"Hallo Welt!\"",
|
||||||
|
|
||||||
|
|
||||||
|
"Welche der nachfolgenden jQuery-Methoden gibt es ?\n": ["jquery.getJSON()", "jquery.getScript()"],
|
||||||
|
"Mit Hilfe eines jQuery-Selektors wurde eine Menge von HTML-Elementen selektiert.\n\n\nMit welcher jQuery-Methode kann man die als Parameter \u00fcbergebenen CSS-Klassen der ausgew\u00e4hlten Elemente setzen bzw. entfernen, je nachdem, ob sie gesetzt waren oder nicht ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": "toggleClass()",
|
||||||
|
"Mit welcher jQuery-Methode kann man die H\u00f6he des ersten ausgew\u00e4hlten Elements setzen bzw. abrufen, wobei Padding (padding) mit ber\u00fccksichtigt werden soll, nicht aber die Randlinie (border) ?\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": "innerHeight()",
|
||||||
|
"Wie lange dauert das jQuery-FadeIn in Millisekunden in der Voreinstellung ?\n": "400",
|
||||||
|
"Welche Aussage(n) ist\/sind im Zusammenhang mit jQuery richtig?\n\n\n": ["JQuery 2.x.x unterstützt nicht mehr Internet Explorer 6, 7 und 8.", "QUnit is a test automation framework used to test the jQuery project.", "JQuery stellt ein browser\u00fcbergreifendes AJAX-API bereit.", "JQuery ist erweiterbar."],
|
||||||
|
"Welche Aussage ist f\u00fcr das nachfolgende jQuery-Schnipsel richtig?\n\nvar hB = $(\"#banner-message\");\n$(\"#container button\").on(\"click\",function( event ){hB.show();});": ["Zeige das #banner-message Element, das mit \"display:none\" versteckt wurde, sobald eine Schaltfl\u00e4che im Element \"#container\" bet\u00e4tigt wird."],
|
||||||
|
"Gegeben sei eine nachfolgende HTML Seite mit einer ungeordneten Liste:\n\n<html>\n<body>\n\n<ul>\n <li>list item 1<\/li>\n <li>list item 2<\/li>\n <li>list item 3<\/li>\n<\/ul>\n<\/body>\n<\/html>\n\n\n\n\nMit dem Selektor $(\"li\") wurden alle Listenelemente selektiert.\n\nMit welcher jQuery-Methode kann man die selektierte Menge auf das erste Listenelement reduzieren ?\n\n\nBeachten Sie: Gro\u00df-\/Kleinschreibung beim Methodennamen ist zu ber\u00fccksichtigen!\n": ".first()",
|
||||||
|
"Which of the following statements are true about AngularJS ? (Choose all that apply.)": ["Imperative programming is suited to defining an AngularJS application's business logic.", "AngularJS provides a framework for model-view-viewmodel (MVVM) architectures.", "AngularJS provides a framework for client-side model-view-controller (MVC) architectures."],
|
||||||
|
"Which of the following paradigms are true for AngularJS? (Choose all that apply.)": ["Decouple the server side of an application from the client side.", "Decouple view manipulation from application logic."],
|
||||||
|
"Which AngularJS function creates an AngularJS module?": "angular.module()",
|
||||||
|
"Which AngularJS directive binds the value of HTML controls (input, select, textarea) to application data?": ["ng-model"],
|
||||||
|
"Which of the following implementation details are true for AngularJS? (Choose all that apply.)": ["AngularJS uses dependency injection.", "Angular brings server-side services to client-side web applications."],
|
||||||
|
"Which of the following statements are true? (Choose all that apply.)": ["AngularJS lets you use HTML as your template language.", "AngularJS is a structural framework for dynamic web apps."],
|
||||||
|
"Which AngularJS directive binds application data to the innerHTML view?": "ng-bind",
|
||||||
|
"The code shows the implementation of a simple memory game. Copy the code to a local file. Modify the code such that the game area is not 4x4 but only 2x2. Upload your file to be graded!": "lonk:https://cringe-studios.com/lzk/memory.html"
|
||||||
|
}
|
||||||
|
|||||||
153
lzk/search.html
Normal file
153
lzk/search.html
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>LZK Extreme Cheats sus moment (Impostor Amogus)</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/x-icon" href="https://nsfw.cringe-studios.com/sus.png">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
font-family: 'Courier Prime', monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td{
|
||||||
|
border: 1px solid;
|
||||||
|
border-collapse: collapse;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(odd) {
|
||||||
|
background-color: rgb(172, 172, 172);
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: rgb(220, 220, 220);
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
grid-template-rows: min-content 1fr;
|
||||||
|
max-height: calc(100vh - 20px);
|
||||||
|
display: grid;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
row-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sussus {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 1.5em;
|
||||||
|
display: block;
|
||||||
|
font-family: 'Courier Prime', monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="text" placeholder="Search for question" id="query" autocomplete="off"></input>
|
||||||
|
<div id="sussus">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>QUESTIONS</th><th>ANSWERS</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<!-- DYNAMIC CONTENT -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<script defer>
|
||||||
|
let tbody = document.getElementsByTagName("tbody")[0];
|
||||||
|
|
||||||
|
async function loadStuff() {
|
||||||
|
let questionsAndAnswrsArray = await $.getJSON("https://cringe-studios.com/lzk/questions.json");
|
||||||
|
|
||||||
|
for(let q in questionsAndAnswrsArray) {
|
||||||
|
let tr = document.createElement("tr");
|
||||||
|
let td = document.createElement("td");
|
||||||
|
td.innerText = q;
|
||||||
|
td.style.padding = "20px";
|
||||||
|
tr.appendChild(td);
|
||||||
|
let td2 = document.createElement("td");
|
||||||
|
|
||||||
|
let theAnswr = questionsAndAnswrsArray[q];
|
||||||
|
if(Array.isArray(theAnswr)) {
|
||||||
|
let ul = document.createElement("ul");
|
||||||
|
for(let answr of theAnswr) {
|
||||||
|
let li = document.createElement("li");
|
||||||
|
li.innerText = answr;
|
||||||
|
ul.appendChild(li);
|
||||||
|
}
|
||||||
|
td2.appendChild(ul);
|
||||||
|
}else if(typeof theAnswr == "object") {
|
||||||
|
let dl = document.createElement("dl");
|
||||||
|
for(let key in theAnswr) {
|
||||||
|
let dt = document.createElement("dt");
|
||||||
|
dt.innerText = key;
|
||||||
|
dl.appendChild(dt);
|
||||||
|
let dd = document.createElement("dd");
|
||||||
|
dd.innerText = theAnswr[key];
|
||||||
|
dl.appendChild(dd);
|
||||||
|
}
|
||||||
|
td2.appendChild(dl);
|
||||||
|
}else{
|
||||||
|
if(theAnswr.startsWith("lonk:")) {
|
||||||
|
let a = document.createElement("a");
|
||||||
|
a.href = theAnswr.substring(5);
|
||||||
|
a.setAttribute("download", "");
|
||||||
|
a.innerText = theAnswr.substring(5);
|
||||||
|
td2.appendChild(a);
|
||||||
|
}else {
|
||||||
|
td2.innerText = theAnswr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr.appendChild(td2);
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
let elements = document.getElementsByTagName("tr");
|
||||||
|
for(let i = 0; i < elements.length; i++){
|
||||||
|
elements[i].onclick = function(e){
|
||||||
|
if(elements[i].style.backgroundColor == "limegreen"){
|
||||||
|
elements[i].style.backgroundColor = "orangered";
|
||||||
|
}else if(elements[i].style.backgroundColor == "orangered"){
|
||||||
|
elements[i].style.backgroundColor = null;
|
||||||
|
}else {
|
||||||
|
elements[i].style.backgroundColor = "limegreen";
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let query = document.getElementById("query");
|
||||||
|
query.oninput = event => {
|
||||||
|
for(let tr of tbody.children) {
|
||||||
|
if(tr.innerText.toLowerCase().includes(query.value.toLowerCase())) {
|
||||||
|
tr.style.display = "table-row";
|
||||||
|
}else {
|
||||||
|
tr.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
loadStuff();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -4,5 +4,8 @@
|
|||||||
"Is\n\n\n0 == true\n\nor\n\n\n0 == false?": ["Falsch"],
|
"Is\n\n\n0 == true\n\nor\n\n\n0 == false?": ["Falsch"],
|
||||||
"The impostor is and .\n\nCrewmates are and .": ["sus", "a sussy baka", "very nice", "innocent"],
|
"The impostor is and .\n\nCrewmates are and .": ["sus", "a sussy baka", "very nice", "innocent"],
|
||||||
"Very weird formatting, but the answer is sus": ["The correct code is let a = \"sus\"; console.log(a);."],
|
"Very weird formatting, but the answer is sus": ["The correct code is let a = \"sus\"; console.log(a);."],
|
||||||
"Choose": {"Choose \"A\"": "A", "Choose \"B\"": "B", "Choose \"C\"": "C"}
|
"Choose": {"Choose \"A\"": "A", "Choose \"B\"": "B", "Choose \"C\"": "C"},
|
||||||
|
"Test3": "A",
|
||||||
|
"Test": "A",
|
||||||
|
"Test2": "Who cares?"
|
||||||
}
|
}
|
||||||
BIN
meeemster/chess/amogusking.png
Normal file
BIN
meeemster/chess/amogusking.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
meeemster/chess/amoguskingb.png
Normal file
BIN
meeemster/chess/amoguskingb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
meeemster/chess/amoguskingw.png
Normal file
BIN
meeemster/chess/amoguskingw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
meeemster/chess/amoguspawn.png
Normal file
BIN
meeemster/chess/amoguspawn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
meeemster/chess/amoguspawnb.png
Normal file
BIN
meeemster/chess/amoguspawnb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
meeemster/chess/amoguspawnw.png
Normal file
BIN
meeemster/chess/amoguspawnw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
217
meeemster/chess/chess copy.html
Normal file
217
meeemster/chess/chess copy.html
Normal file
@ -0,0 +1,217 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html ng-app="myApp">
|
||||||
|
<head>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<!-- CSS only -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #222;
|
||||||
|
color: white;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chessboard {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
width: 80vmin;
|
||||||
|
height: 80vmin;
|
||||||
|
border: 10px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chess-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black, .white {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black > img, .white > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>sussy amogus chess edition</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="#!chess">A</a>
|
||||||
|
<a href="#!two">B</a>
|
||||||
|
<a href="#!three">C</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<div ng-controller="GreetingController" class="chess-container">
|
||||||
|
<div id="chessboard">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
chess end. yay
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
let board = document.getElementById("chessboard");
|
||||||
|
let PAWN = "pawn";
|
||||||
|
let KING = "king";
|
||||||
|
let TEXTURES = {
|
||||||
|
pawn: {w: "amoguspawnw.png", b: "amoguspawnb.png"},
|
||||||
|
king: {w: "amoguskingw.png", b: "amoguskingb.png"}
|
||||||
|
}
|
||||||
|
|
||||||
|
let chessfields = [];
|
||||||
|
|
||||||
|
function getPiece(element) {
|
||||||
|
let field = parseInt(element.getAttribute("data-field"));
|
||||||
|
let x = field % 8;
|
||||||
|
let y = Math.floor(field / 8);
|
||||||
|
let pieceBlack = element.getAttribute("data-pieceBlack") == "true";
|
||||||
|
let type = element.getAttribute("data-pieceType");
|
||||||
|
return {
|
||||||
|
type: type,
|
||||||
|
field: field,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
black: pieceBlack
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPieceAt(x, y) {
|
||||||
|
let field = y * 8 + x;
|
||||||
|
if(field < 0 || field > 63) return null;
|
||||||
|
let fieldEl = chessfields[field];
|
||||||
|
return fieldEl.children.length == 0 ? null : getPiece(fieldEl.children[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
for(let i = 0; i < 64; i++) {
|
||||||
|
let field = document.createElement("div");
|
||||||
|
let x = i % 8;
|
||||||
|
let y = Math.floor(i / 8);
|
||||||
|
if(x % 2 == 0 ^ y % 2 == 0) {
|
||||||
|
field.classList.add("black");
|
||||||
|
}else {
|
||||||
|
field.classList.add("white");
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondragover = function(e) {
|
||||||
|
let piece = e.dataTransfer.getData("piece");
|
||||||
|
if(piece == null) return;
|
||||||
|
let thePiece = document.getElementById(piece);
|
||||||
|
let pieceObj = getPiece(thePiece);
|
||||||
|
|
||||||
|
let pieceOnField = field.children.length != 0;
|
||||||
|
|
||||||
|
switch(pieceObj.type) {
|
||||||
|
case KING:
|
||||||
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||||||
|
if(Math.abs(y - pieceObj.y) > 1) return;
|
||||||
|
|
||||||
|
for(let dx = -1; dx <= 1; dx++) {
|
||||||
|
for(let dy = -1; dy <= 1; dy++) {
|
||||||
|
let p = getPieceAt(x + dx, y + dy);
|
||||||
|
if(p != null && p.type == KING && p.black != pieceObj.black) return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case PAWN:
|
||||||
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||||||
|
if((x - pieceObj.x == 0) == pieceOnField) return;
|
||||||
|
if(y - pieceObj.y != (pieceObj.black ? 1 : -1)) return;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(pieceOnField){
|
||||||
|
let otherPieceObj = getPiece(field.children[0]);
|
||||||
|
if(pieceObj.black != otherPieceObj.black) {
|
||||||
|
field.style.backgroundColor = "red";
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
field.style.backgroundColor = "green";
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondragleave = function(e) {
|
||||||
|
field.style.backgroundColor = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondrop = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let piece = e.dataTransfer.getData("piece");
|
||||||
|
if(piece == null) return;
|
||||||
|
field.style.backgroundColor = null;
|
||||||
|
let thePiece = document.getElementById(piece);
|
||||||
|
thePiece.setAttribute("data-field", i);
|
||||||
|
if(field.children.length != 0) field.children[0].remove();
|
||||||
|
field.appendChild(thePiece);
|
||||||
|
}
|
||||||
|
|
||||||
|
board.appendChild(field);
|
||||||
|
chessfields.push(field);
|
||||||
|
}
|
||||||
|
|
||||||
|
let pieces = [
|
||||||
|
{type: PAWN, black: true},
|
||||||
|
{type: PAWN, black: false},
|
||||||
|
{type: KING, black: true},
|
||||||
|
{type: KING, black: false}
|
||||||
|
];
|
||||||
|
|
||||||
|
for(let p of pieces) {
|
||||||
|
let field;
|
||||||
|
|
||||||
|
outer: while(true) {
|
||||||
|
field = Math.floor(Math.random() * 64);
|
||||||
|
let x = field % 8;
|
||||||
|
let y = Math.floor(field / 8);
|
||||||
|
|
||||||
|
if(chessfields[field].children.length != 0) continue;
|
||||||
|
|
||||||
|
for(let dx = -1; dx <= 1; dx++) {
|
||||||
|
for(let dy = -1; dy <= 1; dy++) {
|
||||||
|
let pc = getPieceAt(x + dx, y + dy);
|
||||||
|
if(pc != null && pc.type == KING && pc.black != p.black) continue outer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let thePiece = document.createElement("img");
|
||||||
|
thePiece.id = "cringe" + Math.random();
|
||||||
|
thePiece.setAttribute("draggable", true);
|
||||||
|
thePiece.src = TEXTURES[p.type][p.black ? "b" : "w"];
|
||||||
|
thePiece.setAttribute("data-pieceType", p.type);
|
||||||
|
thePiece.setAttribute("data-pieceBlack", p.black);
|
||||||
|
thePiece.setAttribute("data-field", field);
|
||||||
|
chessfields[field].appendChild(thePiece);
|
||||||
|
thePiece.ondragstart = function(e) {
|
||||||
|
e.dataTransfer.setData("piece", thePiece.id);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
var myApp = angular.module('myApp',[]);
|
||||||
|
|
||||||
|
myApp.controller('GreetingController', ['$scope', function($scope) {
|
||||||
|
$scope.greeting = 'Cringe';
|
||||||
|
}]);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5
meeemster/chess/chess.html
Normal file
5
meeemster/chess/chess.html
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<div class="chess-container" ng-controller="ChessController">
|
||||||
|
<div id="chessboard">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
168
meeemster/chess/chess.js
Normal file
168
meeemster/chess/chess.js
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
// Constants
|
||||||
|
let PAWN = "pawn";
|
||||||
|
let KING = "king";
|
||||||
|
let TEXTURES = {
|
||||||
|
pawn: {w: "amoguspawnw.png", b: "amoguspawnb.png"},
|
||||||
|
king: {w: "amoguskingw.png", b: "amoguskingb.png"}
|
||||||
|
}
|
||||||
|
|
||||||
|
let board;
|
||||||
|
let chessfields = [];
|
||||||
|
let draggedPiece;
|
||||||
|
|
||||||
|
function getPiece(element) {
|
||||||
|
let field = parseInt(element.getAttribute("data-field"));
|
||||||
|
let x = field % 8;
|
||||||
|
let y = Math.floor(field / 8);
|
||||||
|
let pieceBlack = element.getAttribute("data-pieceBlack") == "true";
|
||||||
|
let type = element.getAttribute("data-pieceType");
|
||||||
|
return {
|
||||||
|
type: type,
|
||||||
|
field: field,
|
||||||
|
x: x,
|
||||||
|
y: y,
|
||||||
|
black: pieceBlack
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPieceAt(x, y) {
|
||||||
|
let field = y * 8 + x;
|
||||||
|
if(field < 0 || field > 63) return null;
|
||||||
|
let fieldEl = chessfields[field];
|
||||||
|
return fieldEl.children.length == 0 ? null : getPiece(fieldEl.children[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startGame() {
|
||||||
|
for(let i = 0; i < 64; i++) {
|
||||||
|
let field = document.createElement("div");
|
||||||
|
let x = i % 8;
|
||||||
|
let y = Math.floor(i / 8);
|
||||||
|
if(x % 2 == 0 ^ y % 2 == 0) {
|
||||||
|
field.classList.add("black");
|
||||||
|
}else {
|
||||||
|
field.classList.add("white");
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondragover = function(e) {
|
||||||
|
let piece = draggedPiece;
|
||||||
|
if(piece == null || piece == "") return;
|
||||||
|
let thePiece = document.getElementById(piece);
|
||||||
|
let pieceObj = getPiece(thePiece);
|
||||||
|
|
||||||
|
let pieceOnField = field.children.length != 0;
|
||||||
|
|
||||||
|
switch(pieceObj.type) {
|
||||||
|
case KING:
|
||||||
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||||||
|
if(Math.abs(y - pieceObj.y) > 1) return;
|
||||||
|
|
||||||
|
for(let dx = -1; dx <= 1; dx++) {
|
||||||
|
for(let dy = -1; dy <= 1; dy++) {
|
||||||
|
let p = getPieceAt(x + dx, y + dy);
|
||||||
|
if(p != null && p.type == KING && p.black != pieceObj.black) return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case PAWN:
|
||||||
|
if(Math.abs(x - pieceObj.x) > 1) return;
|
||||||
|
if((x - pieceObj.x == 0) == pieceOnField) return;
|
||||||
|
if(y - pieceObj.y != (pieceObj.black ? 1 : -1)) return;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(pieceOnField){
|
||||||
|
let otherPieceObj = getPiece(field.children[0]);
|
||||||
|
if(pieceObj.black != otherPieceObj.black) {
|
||||||
|
field.style.backgroundColor = "red";
|
||||||
|
e.preventDefault();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
field.style.backgroundColor = "green";
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondragleave = function(e) {
|
||||||
|
field.style.backgroundColor = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
field.ondrop = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let piece = draggedPiece;
|
||||||
|
if(piece == null || piece == "") return;
|
||||||
|
field.style.backgroundColor = null;
|
||||||
|
let thePiece = document.getElementById(piece);
|
||||||
|
thePiece.setAttribute("data-field", i);
|
||||||
|
if(field.children.length != 0) field.children[0].remove();
|
||||||
|
field.appendChild(thePiece);
|
||||||
|
}
|
||||||
|
|
||||||
|
board.appendChild(field);
|
||||||
|
chessfields.push(field);
|
||||||
|
}
|
||||||
|
|
||||||
|
let pieces = [
|
||||||
|
{type: PAWN, black: true},
|
||||||
|
{type: PAWN, black: false},
|
||||||
|
{type: KING, black: true},
|
||||||
|
{type: KING, black: false}
|
||||||
|
];
|
||||||
|
|
||||||
|
for(let p of pieces) {
|
||||||
|
let field;
|
||||||
|
|
||||||
|
outer: while(true) {
|
||||||
|
field = Math.floor(Math.random() * 64);
|
||||||
|
let x = field % 8;
|
||||||
|
let y = Math.floor(field / 8);
|
||||||
|
|
||||||
|
if(p.type == PAWN && (p.black ? y == 0 : y == 7)) continue;
|
||||||
|
if(chessfields[field].children.length != 0) continue;
|
||||||
|
|
||||||
|
for(let dx = -1; dx <= 1; dx++) {
|
||||||
|
for(let dy = -1; dy <= 1; dy++) {
|
||||||
|
let pc = getPieceAt(x + dx, y + dy);
|
||||||
|
if(pc != null && pc.type == KING && pc.black != p.black) continue outer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let thePiece = document.createElement("img");
|
||||||
|
thePiece.id = "cringe" + Math.random();
|
||||||
|
thePiece.setAttribute("draggable", true);
|
||||||
|
thePiece.src = TEXTURES[p.type][p.black ? "b" : "w"];
|
||||||
|
thePiece.setAttribute("data-pieceType", p.type);
|
||||||
|
thePiece.setAttribute("data-pieceBlack", p.black);
|
||||||
|
thePiece.setAttribute("data-field", field);
|
||||||
|
chessfields[field].appendChild(thePiece);
|
||||||
|
thePiece.ondragstart = function(e) {
|
||||||
|
draggedPiece = thePiece.id;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var app = angular.module("myApp", ["ngRoute"]);
|
||||||
|
|
||||||
|
app.config(function($routeProvider) {
|
||||||
|
$routeProvider
|
||||||
|
.when("/", {templateUrl: "chess.html"})
|
||||||
|
.when("/one", {templateUrl: "one.html"})
|
||||||
|
.when("/two", {templateUrl: "two.html"})
|
||||||
|
});
|
||||||
|
|
||||||
|
app.controller('ChessController', ['$scope', function($scope) {
|
||||||
|
board = document.getElementById("chessboard");
|
||||||
|
chessfields = [];
|
||||||
|
|
||||||
|
startGame();
|
||||||
|
}]);
|
||||||
|
|
||||||
|
app.controller('OneController', ['$scope', function($scope) {
|
||||||
|
$("p").click(function() {
|
||||||
|
$(this).slideUp();
|
||||||
|
});
|
||||||
|
}]);
|
||||||
28
meeemster/chess/index.html
Normal file
28
meeemster/chess/index.html
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html ng-app="myApp">
|
||||||
|
<head>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
<!-- CSS only -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
|
||||||
|
<link rel="icon" href="amoguspawn.png">
|
||||||
|
<script src="chess.js"></script>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Sussy Chess</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#!/">Play Chess</a></li>
|
||||||
|
<li><a href="#!/one">Lorem Ipsum</a></li>
|
||||||
|
<li><a href="#!/two">What is Lorem Ipsum?</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section ng-view>
|
||||||
|
</section>
|
||||||
|
<footer>This is the end of the page</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
24
meeemster/chess/one.html
Normal file
24
meeemster/chess/one.html
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
<div class="container" ng-controller="OneController">
|
||||||
|
<h2>Lorem Ipsum</h2>
|
||||||
|
<strong>Click on a paragraph to collapse it</strong>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In hendrerit gravida rutrum quisque non tellus orci. Eleifend donec pretium vulputate sapien. Semper auctor neque vitae tempus. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Id nibh tortor id aliquet lectus proin nibh nisl. Vel eros donec ac odio tempor orci. Volutpat lacus laoreet non curabitur gravida. Ipsum suspendisse ultrices gravida dictum fusce ut. Pellentesque nec nam aliquam sem et tortor consequat id. Congue nisi vitae suscipit tellus mauris a diam maecenas. Duis ut diam quam nulla porttitor massa id neque aliquam. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Id leo in vitae turpis massa sed elementum tempus. Dignissim enim sit amet venenatis urna cursus eget. Pulvinar elementum integer enim neque.</p>
|
||||||
|
<p>Id aliquet lectus proin nibh nisl condimentum id venenatis. Facilisi morbi tempus iaculis urna id. Ac turpis egestas sed tempus urna et pharetra. Massa id neque aliquam vestibulum morbi blandit cursus. Ut porttitor leo a diam sollicitudin. Viverra nam libero justo laoreet sit amet cursus sit amet. Aliquam malesuada bibendum arcu vitae. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Ut lectus arcu bibendum at varius vel pharetra vel. Tristique senectus et netus et malesuada fames ac turpis. Sit amet facilisis magna etiam tempor orci. Magna etiam tempor orci eu. Tellus pellentesque eu tincidunt tortor aliquam. Pharetra et ultrices neque ornare. Donec ultrices tincidunt arcu non sodales neque sodales ut. Urna et pharetra pharetra massa massa ultricies. Facilisi nullam vehicula ipsum a arcu cursus. Turpis in eu mi bibendum neque egestas.</p>
|
||||||
|
<p>Et leo duis ut diam quam. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Ultrices in iaculis nunc sed augue lacus viverra vitae congue. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Ornare suspendisse sed nisi lacus sed viverra. Nunc id cursus metus aliquam eleifend mi in. Varius morbi enim nunc faucibus. Amet volutpat consequat mauris nunc congue nisi. Enim nulla aliquet porttitor lacus luctus accumsan. Faucibus nisl tincidunt eget nullam non. Consectetur lorem donec massa sapien faucibus et molestie ac. Dolor sit amet consectetur adipiscing elit ut. A iaculis at erat pellentesque adipiscing commodo. Nunc non blandit massa enim nec dui nunc. Erat pellentesque adipiscing commodo elit at imperdiet. Posuere urna nec tincidunt praesent semper. Quis risus sed vulputate odio ut. Enim ut tellus elementum sagittis. Sed id semper risus in hendrerit.</p>
|
||||||
|
<p>Fermentum dui faucibus in ornare quam viverra orci. Nisi porta lorem mollis aliquam ut porttitor leo a diam. Auctor urna nunc id cursus metus. Eget nunc scelerisque viverra mauris in. Sollicitudin tempor id eu nisl nunc. Elit sed vulputate mi sit amet. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Vulputate enim nulla aliquet porttitor lacus. Vitae sapien pellentesque habitant morbi tristique senectus et netus.</p>
|
||||||
|
<p>Consectetur adipiscing elit ut aliquam purus sit amet luctus. Mattis enim ut tellus elementum sagittis vitae. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt eget. Faucibus scelerisque eleifend donec pretium vulputate. Pellentesque adipiscing commodo elit at imperdiet dui. Duis at tellus at urna condimentum mattis pellentesque id. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Augue eget arcu dictum varius duis at. Elementum sagittis vitae et leo duis ut diam quam nulla. Lorem mollis aliquam ut porttitor. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
|
||||||
|
<p>Pretium fusce id velit ut tortor pretium viverra. Orci sagittis eu volutpat odio facilisis mauris sit. Platea dictumst quisque sagittis purus sit amet. Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Ultrices eros in cursus turpis massa tincidunt. Pharetra convallis posuere morbi leo urna molestie at elementum. Arcu felis bibendum ut tristique et egestas quis ipsum suspendisse. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Eu turpis egestas pretium aenean pharetra magna ac placerat. Morbi tincidunt ornare massa eget egestas purus viverra. At tellus at urna condimentum mattis pellentesque id nibh. Quam nulla porttitor massa id neque aliquam vestibulum morbi blandit. Maecenas ultricies mi eget mauris pharetra. In ornare quam viverra orci sagittis eu volutpat odio. Fringilla urna porttitor rhoncus dolor purus. Sit amet volutpat consequat mauris nunc. Tincidunt praesent semper feugiat nibh sed pulvinar. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis.</p>
|
||||||
|
<p>Eu facilisis sed odio morbi quis commodo odio. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus. Adipiscing elit ut aliquam purus sit amet. Et netus et malesuada fames. Lectus magna fringilla urna porttitor rhoncus dolor. Amet est placerat in egestas. Pellentesque elit eget gravida cum sociis natoque penatibus et magnis. Curabitur gravida arcu ac tortor dignissim. Est lorem ipsum dolor sit amet consectetur adipiscing. Metus aliquam eleifend mi in nulla posuere sollicitudin. Integer quis auctor elit sed vulputate. Aliquet sagittis id consectetur purus ut faucibus. Ac odio tempor orci dapibus. Magnis dis parturient montes nascetur ridiculus mus. Turpis egestas sed tempus urna et pharetra pharetra massa. Cursus in hac habitasse platea dictumst quisque sagittis purus. Nunc congue nisi vitae suscipit tellus mauris a diam maecenas.</p>
|
||||||
|
<p>Elit at imperdiet dui accumsan sit amet nulla facilisi. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Blandit massa enim nec dui nunc mattis enim ut tellus. At consectetur lorem donec massa sapien. Iaculis nunc sed augue lacus viverra vitae. Gravida cum sociis natoque penatibus et. Ut tellus elementum sagittis vitae. Suscipit tellus mauris a diam maecenas sed enim ut sem. Adipiscing vitae proin sagittis nisl rhoncus. Sed nisi lacus sed viverra tellus in hac. A diam sollicitudin tempor id eu nisl. Iaculis nunc sed augue lacus viverra vitae congue eu. Diam maecenas sed enim ut. A iaculis at erat pellentesque. Enim facilisis gravida neque convallis a.</p>
|
||||||
|
<p>Aliquam malesuada bibendum arcu vitae elementum. Duis ut diam quam nulla porttitor. Amet est placerat in egestas erat imperdiet. Diam vel quam elementum pulvinar. Ut lectus arcu bibendum at varius vel. Porttitor lacus luctus accumsan tortor posuere ac ut. Leo vel orci porta non pulvinar neque laoreet. Eget mi proin sed libero enim sed faucibus turpis. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. Dui accumsan sit amet nulla facilisi morbi tempus iaculis urna. Etiam dignissim diam quis enim lobortis scelerisque. At imperdiet dui accumsan sit amet nulla. Dui nunc mattis enim ut. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Nibh venenatis cras sed felis. Et netus et malesuada fames ac. Quis enim lobortis scelerisque fermentum dui. Leo a diam sollicitudin tempor id eu nisl nunc mi. Sit amet risus nullam eget.</p>
|
||||||
|
<p>Eget mauris pharetra et ultrices. Rhoncus dolor purus non enim. Risus nec feugiat in fermentum posuere urna nec. Lectus urna duis convallis convallis tellus id. Magna fermentum iaculis eu non diam phasellus vestibulum. Semper risus in hendrerit gravida. Ut morbi tincidunt augue interdum velit euismod in pellentesque. Eget duis at tellus at urna condimentum mattis. Non diam phasellus vestibulum lorem sed. Vel turpis nunc eget lorem dolor sed viverra ipsum. Porttitor massa id neque aliquam vestibulum morbi blandit cursus. Pulvinar pellentesque habitant morbi tristique senectus et netus et. Nec dui nunc mattis enim ut tellus elementum sagittis. Maecenas sed enim ut sem viverra aliquet eget.</p>
|
||||||
|
<p>Felis eget nunc lobortis mattis aliquam faucibus purus in. At auctor urna nunc id cursus metus aliquam eleifend. Nibh mauris cursus mattis molestie a iaculis at erat. Sit amet justo donec enim diam vulputate ut pharetra. Eu lobortis elementum nibh tellus molestie. Sagittis purus sit amet volutpat consequat mauris nunc. Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. In fermentum posuere urna nec tincidunt praesent semper feugiat. Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Molestie a iaculis at erat pellentesque adipiscing commodo elit. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet est placerat in egestas erat imperdiet. Egestas dui id ornare arcu odio ut sem nulla pharetra.</p>
|
||||||
|
<p>In nisl nisi scelerisque eu ultrices vitae. Ultrices vitae auctor eu augue ut lectus arcu bibendum at. Quis commodo odio aenean sed adipiscing. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Fermentum et sollicitudin ac orci phasellus egestas tellus. Fusce id velit ut tortor pretium. Eros in cursus turpis massa. Leo vel orci porta non pulvinar neque laoreet suspendisse. Donec adipiscing tristique risus nec feugiat in. Libero enim sed faucibus turpis in eu mi bibendum neque. Orci sagittis eu volutpat odio facilisis. Adipiscing elit ut aliquam purus sit amet. Tincidunt ornare massa eget egestas purus. Etiam erat velit scelerisque in dictum. Nibh nisl condimentum id venenatis a condimentum vitae sapien. Dictum at tempor commodo ullamcorper a lacus vestibulum. Diam vulputate ut pharetra sit amet aliquam id diam. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Amet commodo nulla facilisi nullam vehicula ipsum a arcu.</p>
|
||||||
|
<p>Dui vivamus arcu felis bibendum ut tristique et. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Malesuada fames ac turpis egestas maecenas. Eget gravida cum sociis natoque penatibus et magnis dis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Convallis aenean et tortor at risus viverra adipiscing. Adipiscing elit duis tristique sollicitudin nibh sit amet. Tortor at risus viverra adipiscing at in tellus integer. Sit amet dictum sit amet justo. Donec pretium vulputate sapien nec. Senectus et netus et malesuada fames ac. Bibendum arcu vitae elementum curabitur vitae. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt.</p>
|
||||||
|
<p>Orci ac auctor augue mauris augue neque gravida in. Dolor purus non enim praesent elementum facilisis. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Mus mauris vitae ultricies leo integer malesuada nunc. Dolor sit amet consectetur adipiscing. Ut aliquam purus sit amet. Sit amet justo donec enim diam vulputate. Libero enim sed faucibus turpis in eu. Netus et malesuada fames ac. Ullamcorper malesuada proin libero nunc. Neque laoreet suspendisse interdum consectetur libero id. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Bibendum neque egestas congue quisque egestas diam in arcu. Sagittis aliquam malesuada bibendum arcu. Quisque id diam vel quam elementum pulvinar. Sed viverra tellus in hac habitasse platea dictumst vestibulum. At elementum eu facilisis sed odio morbi. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum.</p>
|
||||||
|
<p>Lorem dolor sed viverra ipsum nunc aliquet bibendum. Porta lorem mollis aliquam ut porttitor leo a diam. Vitae proin sagittis nisl rhoncus mattis. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Nullam ac tortor vitae purus faucibus. Tortor dignissim convallis aenean et tortor at risus viverra. Varius sit amet mattis vulputate enim nulla aliquet porttitor. At urna condimentum mattis pellentesque id nibh tortor id aliquet. Vestibulum sed arcu non odio euismod lacinia. Condimentum mattis pellentesque id nibh tortor id aliquet lectus.</p>
|
||||||
|
<p>Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Consectetur a erat nam at lectus urna duis convallis. Quis lectus nulla at volutpat diam ut venenatis tellus in. Eu ultrices vitae auctor eu augue ut lectus arcu bibendum. Tortor posuere ac ut consequat semper viverra. Cursus in hac habitasse platea dictumst. Vitae auctor eu augue ut. Fringilla urna porttitor rhoncus dolor purus non. Ut venenatis tellus in metus vulputate eu. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. A condimentum vitae sapien pellentesque habitant. Vitae justo eget magna fermentum iaculis eu. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing.</p>
|
||||||
|
<p>Justo laoreet sit amet cursus sit amet. Risus quis varius quam quisque id diam. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Gravida in fermentum et sollicitudin. Iaculis nunc sed augue lacus viverra vitae congue. Augue neque gravida in fermentum et sollicitudin ac orci phasellus. Sed viverra tellus in hac habitasse. A arcu cursus vitae congue. Diam ut venenatis tellus in metus. Magna ac placerat vestibulum lectus mauris ultrices. Posuere urna nec tincidunt praesent semper feugiat nibh.</p>
|
||||||
|
<p>Cursus sit amet dictum sit. Tortor at auctor urna nunc id cursus metus aliquam. Sapien pellentesque habitant morbi tristique senectus et. Eu ultrices vitae auctor eu augue ut. Sit amet commodo nulla facilisi nullam vehicula. Eget velit aliquet sagittis id consectetur. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Vitae nunc sed velit dignissim sodales ut eu. Massa sapien faucibus et molestie. Nisi quis eleifend quam adipiscing. Eget gravida cum sociis natoque penatibus. Quis eleifend quam adipiscing vitae. Morbi tristique senectus et netus et. Integer eget aliquet nibh praesent tristique magna sit amet. Augue eget arcu dictum varius duis at consectetur lorem donec.</p>
|
||||||
|
<p>Pellentesque pulvinar pellentesque habitant morbi tristique senectus. Duis convallis convallis tellus id interdum velit laoreet id. Morbi tempus iaculis urna id volutpat lacus laoreet non curabitur. Sed enim ut sem viverra aliquet eget sit. Vulputate mi sit amet mauris commodo. Netus et malesuada fames ac turpis egestas maecenas. Pellentesque elit eget gravida cum sociis natoque. Lorem dolor sed viverra ipsum nunc. Congue quisque egestas diam in. Elit pellentesque habitant morbi tristique senectus et netus et. Commodo elit at imperdiet dui. Consequat ac felis donec et odio pellentesque diam. A iaculis at erat pellentesque adipiscing commodo. Cursus risus at ultrices mi tempus imperdiet. Dolor sit amet consectetur adipiscing elit.</p>
|
||||||
|
<p>Pharetra sit amet aliquam id diam maecenas. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae. Aliquet lectus proin nibh nisl condimentum id. Porttitor rhoncus dolor purus non enim praesent elementum. Tellus cras adipiscing enim eu. Blandit cursus risus at ultrices mi tempus imperdiet nulla malesuada. Vitae turpis massa sed elementum tempus egestas. Enim tortor at auctor urna nunc id cursus metus aliquam. Ullamcorper a lacus vestibulum sed arcu non odio. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Gravida arcu ac tortor dignissim convallis aenean et tortor at.</p>
|
||||||
|
</div>
|
||||||
55
meeemster/chess/style.css
Normal file
55
meeemster/chess/style.css
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
body {
|
||||||
|
background-color: #222;
|
||||||
|
color: white;
|
||||||
|
user-select: none;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chessboard {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||||
|
width: 80vmin;
|
||||||
|
height: 80vmin;
|
||||||
|
border: 10px solid gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chess-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black {
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black, .white {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.black > img, .white > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul > li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:active, a:visited {
|
||||||
|
color: skyblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
11
meeemster/chess/two.html
Normal file
11
meeemster/chess/two.html
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
<div class="container">
|
||||||
|
<h2>What is Lorem Ipsum?</h2>
|
||||||
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||||
|
<h2>Why do we use it?</h2>
|
||||||
|
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
|
||||||
|
<h2>Where does it come from?</h2>
|
||||||
|
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
|
||||||
|
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
|
||||||
|
<h2>Where can I get some?</h2>
|
||||||
|
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
|
||||||
|
</div>
|
||||||
BIN
meeemster/weather/cloud.png
Normal file
BIN
meeemster/weather/cloud.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
63
meeemster/weather/weather.css
Normal file
63
meeemster/weather/weather.css
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
html {
|
||||||
|
font-family: 'Arial';
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: orangered;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
margin: 20px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > ul > li {
|
||||||
|
display: inline;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
color: black;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background-color: orange;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: rgb(204, 133, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background-color: lightgray;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: darkgray;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#weather {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#weather-datetime {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
58
meeemster/weather/weather.html
Normal file
58
meeemster/weather/weather.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Amazing Weather Site</title>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
|
||||||
|
<script src="weather.js" defer></script>
|
||||||
|
<link rel="stylesheet" href="weather.css" />
|
||||||
|
<link rel="icon" href="cloud.png" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header id="header">
|
||||||
|
<h1>Amazing Weather Site</h1>
|
||||||
|
<h2>Always displays accurate information about the weather at Hof University</h2>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">The Weather</a></li>
|
||||||
|
<li><a href="https://www.hof-university.de" target="_blank">Hof-University</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h2>Take a look at the weather</h2>
|
||||||
|
<div id="weather">
|
||||||
|
<div id="weather-datetime">Loading...</div>
|
||||||
|
<div id="weather-temphum">Loading...</div>
|
||||||
|
<div id="weather-wind">Loading...</div>
|
||||||
|
<div id="weather-other">Loading...</div>
|
||||||
|
<div id="weather-soil">Loading...</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>More content about the weather</h2>
|
||||||
|
<article id="article-one">
|
||||||
|
<h3>What is Weather?</h3>
|
||||||
|
<p>Weather is the state of the atmosphere, describing for example the degree to which it is hot or cold, wet or dry, calm or stormy, clear or cloudy. On Earth, most weather phenomena occur in the lowest layer of the planet's atmosphere, the troposphere, just below the stratosphere. Weather refers to day-to-day temperature, precipitation, and other atmospheric conditions, whereas climate is the term for the averaging of atmospheric conditions over longer periods of time. When used without qualification, "weather" is generally understood to mean the weather of Earth.</p>
|
||||||
|
<p>Weather is driven by air pressure, temperature, and moisture differences between one place and another. These differences can occur due to the Sun's angle at any particular spot, which varies with latitude. The strong temperature contrast between polar and tropical air gives rise to the largest scale atmospheric circulations: the Hadley cell, the Ferrel cell, the polar cell, and the jet stream. Weather systems in the middle latitudes, such as extratropical cyclones, are caused by instabilities of the jet streamflow. Because Earth's axis is tilted relative to its orbital plane (called the ecliptic), sunlight is incident at different angles at different times of the year. On Earth's surface, temperatures usually range ±40 °C (-40 °F to 104 °F) annually. Over thousands of years, changes in Earth's orbit can affect the amount and distribution of solar energy received by Earth, thus influencing long-term climate and global climate change.</p>
|
||||||
|
<p>Surface temperature differences in turn cause pressure differences. Higher altitudes are cooler than lower altitudes, as most atmospheric heating is due to contact with the Earth's surface while radiative losses to space are mostly constant. Weather forecasting is the application of science and technology to predict the state of the atmosphere for a future time and a given location. Earth's weather system is a chaotic system; as a result, small changes to one part of the system can grow to have large effects on the system as a whole. Human attempts to control the weather have occurred throughout history, and there is evidence that human activities such as agriculture and industry have modified weather patterns</p>
|
||||||
|
<p>Studying how the weather works on other planets has been helpful in understanding how weather works on Earth. A famous landmark in the Solar System, Jupiter's Great Red Spot, is an anticyclonic storm known to have existed for at least 300 years. However, the weather is not limited to planetary bodies. A star's corona is constantly being lost to space, creating what is essentially a very thin atmosphere throughout the Solar System. The movement of mass ejected from the Sun is known as the solar wind. </p>
|
||||||
|
</article>
|
||||||
|
<article id="a-secret-hidden-article" style="display:none;">
|
||||||
|
<h3>A very not hidden article about Lorem Ipsum</h3>
|
||||||
|
<h4>Foreword</h4>
|
||||||
|
Oh wow, you found the secret hidden article that was not hidden at all
|
||||||
|
<h4>What is Lorem Ipsum?</h4>
|
||||||
|
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
|
||||||
|
<h4>Why do we use it?</h4>
|
||||||
|
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
This website was made by me | Useful buttons:
|
||||||
|
<button id="toggle-header">Toggle header</button>
|
||||||
|
<button id="hide-article">Hide article</button>
|
||||||
|
<button id="show-hidden-article">Show a secret hidden article</button>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
28
meeemster/weather/weather.js
Normal file
28
meeemster/weather/weather.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
var WEATHER_API_URL = "/restFullAPI/v2";
|
||||||
|
//var WEATHER_API_URL = "http://wetterstation.hof-university.de/restFullAPI/v2/";
|
||||||
|
|
||||||
|
$(() => {
|
||||||
|
$("#toggle-header").click(() => {
|
||||||
|
$("#header").toggle();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#hide-article").click(() => {
|
||||||
|
$("#article-one").hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#show-hidden-article").click(() => {
|
||||||
|
$("#a-secret-hidden-article").show();
|
||||||
|
});
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: WEATHER_API_URL,
|
||||||
|
type: "GET",
|
||||||
|
success: data => {
|
||||||
|
$("#weather-datetime").text(data.dateTime);
|
||||||
|
$("#weather-temphum").text("Temperature: " + data.temperature + " °C | Humidity: " + data.humidity + "% | Atm. Pressure: " + data.atmosphericPressure + " mbar");
|
||||||
|
$("#weather-wind").text("The wind is blowing at " + data.windSpeedKmh + " km/h (" + data.windSpeed + " m/s) in direction " + data.windDirectionString + " (" + data.windDirection + ")");
|
||||||
|
$("#weather-other").text("Global Irradiance: " + data.globalIrradiance + " | Precipitation: " + data.precipitation);
|
||||||
|
$("#weather-soil").text("Soil Temp.: " + data.soilTemperature + " °C | Soil Humidity: " + data.soilHumidity + "%");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
6
restFullAPI/.htaccess
Normal file
6
restFullAPI/.htaccess
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
RewriteEngine On
|
||||||
|
|
||||||
|
RewriteRule ^v2$ v2.json
|
||||||
|
|
||||||
|
Header set Access-Control-Allow-Origin "*"
|
||||||
|
Header set Access-Control-Allow-Headers "content-type"
|
||||||
1
restFullAPI/v2.json
Normal file
1
restFullAPI/v2.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"dateTime":"05.05.2022 13:55 Uhr","temperature":"15","humidity":"66","atmosphericPressure":"958","windSpeed":"2.61","windSpeedKmh":"9.4","windDirection":"337.5","windDirectionString":"WNW","globalIrradiance":"823","precipitation":"0","soilTemperature":"12","soilHumidity":"22"}
|
||||||
Loading…
Reference in New Issue
Block a user