Upload files to '08/ArtemisGryllaki'
parent
0a0a741c9e
commit
56c22da0f6
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Questions on Networks</title>
|
||||
<link rel="stylesheet" href="style5.css">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: black;
|
||||
padding-left: 30px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
a:link, a:visited {
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
padding: 14px 25px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 20%;
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
padding: 20px;
|
||||
}
|
||||
svg {
|
||||
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 6%;
|
||||
color: white;
|
||||
background-color: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<header><br>
|
||||
<h1>Questions on Networks</h1>
|
||||
<p><span class="blink">Centralized vs Federated</blink></a></p>
|
||||
</header>
|
||||
<body>
|
||||
<br><br>
|
||||
<svg id="canvas" align="center"></svg>
|
||||
|
||||
</body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
|
||||
<div class="push"></div>
|
||||
</div>
|
||||
<footer class="footer"><a href="privacy.html">PRIVACY</a><a href="privacy.html">FOCUS-GOAL</a><a href="privacy.html">ENERGY CONSUMPTION</a><a href="privacy.html">RESILIENCE IN DISASTER</a><a href="privacy.html">KNOWLEDGE OF TOOLS</a></footer>
|
||||
|
||||
|
||||
<script>
|
||||
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
|
||||
var svg = document.getElementById('canvas');
|
||||
var padding = 15;
|
||||
var circleRadius = 15;
|
||||
|
||||
/**
|
||||
* Returns a random number between min (inclusive) and max (exclusive)
|
||||
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
|
||||
*/
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns randomly either "true" or "false" with 50% chance for each one.
|
||||
* @returns {boolean}
|
||||
*/
|
||||
function getRandomBoolean() {
|
||||
return getRandomArbitrary(0, 2) === 1;
|
||||
}
|
||||
|
||||
//when we execute sleep (...ms), program waits for (...ms)
|
||||
function sleep(time) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => {
|
||||
resolve();
|
||||
}, time);
|
||||
});
|
||||
}
|
||||
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
|
||||
function pickARandomCirclePosition() {
|
||||
var w = parseInt(window.getComputedStyle(svg).width);
|
||||
var h = parseInt(window.getComputedStyle(svg).height);
|
||||
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
|
||||
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
|
||||
//return an object which has 2 properties, named x,y and value the value of var x,y
|
||||
return { x: x, y: y };
|
||||
}
|
||||
|
||||
//======================================================================//
|
||||
// new code 2019.03.02:
|
||||
|
||||
const messages = [
|
||||
"PRIVACY?",
|
||||
"RESILIENCE IN DISASTER?",
|
||||
"ENERGY CONSUMPTION CONTROL?",
|
||||
"FOCUS ON USE OR PROFIT?",
|
||||
"KNOWLEDGE OF THE TOOLS USED?",
|
||||
];
|
||||
|
||||
const clickedCircles = [];
|
||||
const links = [];
|
||||
const positions = [];
|
||||
|
||||
|
||||
class Question {
|
||||
constructor(text) {
|
||||
|
||||
|
||||
|
||||
// Create property "text".
|
||||
this.text = text;
|
||||
|
||||
const position = pickARandomCirclePosition();
|
||||
/*const position = positionsFromJson[positionFromJsonIndex++];*/
|
||||
positions.push(position);
|
||||
|
||||
const htmlCircle = this.createCircle(position);
|
||||
const htmlText = this.createText(position, text);
|
||||
|
||||
|
||||
const onMouseenterShowText = () => { htmlText.style.display = 'block'; };
|
||||
const onMouseleaveHideText = () => { htmlText.style.display = 'none'; };
|
||||
|
||||
|
||||
htmlCircle.addEventListener('mouseleave', onMouseleaveHideText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', onMouseenterShowText);
|
||||
|
||||
htmlCircle.addEventListener('mouseenter', () => {
|
||||
htmlCircle.style.fill = 'red';
|
||||
});
|
||||
htmlCircle.addEventListener('mouseleave', () => {
|
||||
htmlCircle.style.fill = 'black';
|
||||
});
|
||||
|
||||
/*htmlCircle.addEventListener('click', () => {
|
||||
htmlText.style.display = 'block';
|
||||
htmlCircle.removeEventListener('mouseenter', onMouseenterShowText);
|
||||
htmlCircle.removeEventListener('mouseleave', onMouseleaveHideText);
|
||||
});*/
|
||||
|
||||
htmlCircle.addEventListener('click', () => {
|
||||
//if(!clickedCircles.includes(htmlCircle)) {
|
||||
clickedCircles.push(htmlCircle);
|
||||
//}
|
||||
this.linkClickedWithPreviouslyClicked();
|
||||
//this.linkClickedWithAllPreviouslyClicked();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
createCircle(position) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.style.fill = 'black';
|
||||
circle.setAttribute('cx', position.x);
|
||||
circle.setAttribute('cy', position.y);
|
||||
circle.setAttribute('r', circleRadius);
|
||||
svg.appendChild(circle);
|
||||
return circle;
|
||||
}
|
||||
|
||||
createText(position, textContent) {
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', position.x + 2*circleRadius);
|
||||
text.setAttribute('y', position.y + circleRadius/2);
|
||||
text.textContent = textContent;
|
||||
text.style.display = 'none';
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontStyle = "italic";
|
||||
text.style.fontFamily = "Courier";
|
||||
text.style.fontWeight = "bold";
|
||||
text.style.fontSize = "large";
|
||||
svg.appendChild(text);
|
||||
return text;
|
||||
}
|
||||
|
||||
createLine(position1, position2) {
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
line.setAttribute('x1', position1.x);
|
||||
line.setAttribute('y1', position1.y);
|
||||
line.setAttribute('x2', position2.x);
|
||||
line.setAttribute('y2', position2.y);
|
||||
line.setAttribute('stroke', 'black');
|
||||
svg.appendChild(line);
|
||||
return line;
|
||||
}
|
||||
|
||||
linkClickedWithPreviouslyClicked() {
|
||||
const length = clickedCircles.length;
|
||||
if(length < 2) { return; }
|
||||
|
||||
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
|
||||
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
|
||||
|
||||
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
|
||||
|
||||
const htmlLine = this.createLine(circle1Pos, circle2Pos);
|
||||
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
|
||||
|
||||
|
||||
getCircleCenterPosition(htmlCircle) {
|
||||
return {
|
||||
x: htmlCircle.cx.baseVal.value,
|
||||
y: htmlCircle.cy.baseVal.value,
|
||||
};
|
||||
}
|
||||
|
||||
getLinkAsString(circle1Pos, circle2Pos) {
|
||||
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
|
||||
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
|
||||
|
||||
const linkAsString = pos1AsString + "-" + pos2AsString;
|
||||
|
||||
return linkAsString;
|
||||
}
|
||||
|
||||
linkAlreadyExists(circle1Pos, circle2Pos) {
|
||||
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
|
||||
}
|
||||
}
|
||||
|
||||
async function network() {
|
||||
for(let i = 0; i < messages.length; i++) {
|
||||
const message = messages[i];
|
||||
new Question(message);
|
||||
|
||||
//"await" works only inside async functions
|
||||
const delayBetweenQuestionCreations = 50;
|
||||
await sleep(delayBetweenQuestionCreations);
|
||||
}
|
||||
|
||||
console.log(JSON.stringify(positions));
|
||||
|
||||
}
|
||||
network();
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,32 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>PRIVACY ISSUE</title>
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<br><br>
|
||||
<iframe id="frame1" width="400" height="230" src="https://www.youtube.com/embed/O-x4jQ2UNOw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame2" src="https://www.bbc.com/news/technology-43465968" height="230" width="400" style="border:none;"></iframe>
|
||||
<iframe id="frame3" name="ifr" src="http://networkcultures.org/unlikeus/2013/03/21/monetizing-privacy-how-much-does-facebook-owe-you/" height="230" width="400" style="border:none;"> </iframe><br>
|
||||
<iframe id="frame4" width="400" height="230" src="https://www.youtube.com/embed/NW5RLBqQmFA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame5" width="400" height="230" src="https://www.youtube.com/embed/IPSbNdBmWKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame6" src="https://blog.soykaf.com/tags/privacy/" height="230" width="400" style="border:none;"> </iframe><br>
|
||||
<iframe id="frame7" width="400" height="230" src="https://www.youtube.com/embed/5R0x_WRZdFM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<iframe id="frame8" src="https://global.oup.com/academic/product/communication-power-9780199681938?cc=nl&lang=en&" height="230" width="400" style="border:none;"> </iframe>
|
||||
<iframe id="frame9" src="https://homebrewserver.club/configuring-a-modern-xmpp-server.html" height="230" width="400" style="border:none;"> </iframe>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue