generator für alle fragen
This commit is contained in:
Daniel Gerber
377
static-site-generator/generated_question.html
Normal file
377
static-site-generator/generated_question.html
Normal file
@@ -0,0 +1,377 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style media="screen">
|
||||
html {
|
||||
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.28571429em;
|
||||
font-weight: 700;
|
||||
line-height: 1.2857em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
font-size: 1em;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: .28571429rem;
|
||||
box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5;
|
||||
}
|
||||
|
||||
.card-block {
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
border: none;
|
||||
border-top: 1px solid rgba(34, 36, 38, .1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.28571429em;
|
||||
font-weight: 700;
|
||||
line-height: 1.2857em;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
clear: both;
|
||||
margin-top: .5em;
|
||||
color: rgba(0, 0, 0, .68);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
font-size: 1em;
|
||||
position: static;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
padding: .75em 1em;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
border-top: 1px solid rgba(0, 0, 0, .05) !important;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.card-inverse .btn {
|
||||
border: 1px solid rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.profile {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 0;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.profile-inline {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.profile-inline ~ .card-title {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.text-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-size: 1em;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.meta a {
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
.meta a:hover {
|
||||
color: rgba(0, 0, 0, .87);
|
||||
}
|
||||
</style>
|
||||
<title>Willst du das die EU besser wird?</title>
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
||||
<!-- Optional theme -->
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->
|
||||
|
||||
<!-- Latest compiled and minified JavaScript -->
|
||||
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
|
||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
||||
</head>
|
||||
<body style="padding-bottom: 15px;">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<img src="images/header.jpg" class="img-responsive" alt="Eurom.at"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<h4>Wir haben gefragt:</h4>
|
||||
<h1>Willst du das die EU besser wird?</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="col-md-4">
|
||||
<canvas id="myChart" ></canvas>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="container">
|
||||
<div class="col-md-12">
|
||||
<h5>Zustimmung</h5>
|
||||
<p style="word-wrap: break-word;">Sozialdemokratische Partei Deutschlands, Sozialdemokratische Partei Deutschlands, Sozialdemokratische Partei Deutschlands, Sozialdemokratische Partei Deutschlands</p>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h5>Enthaltung</h5>
|
||||
<p>Freie Demokratische Partei, Freie Demokratische Partei, Freie Demokratische Partei, Freie Demokratische Partei</p>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<h5>Enthaltung</h5>
|
||||
<p>Christlich Demokratische Union, Christlich Demokratische Union, Christlich Demokratische Union, Christlich Demokratische Union</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" style="margin-top: 20px;">
|
||||
<h4>Antworten der Partein:</h4>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/spd.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Sozialdemokratische Partei Deutschlands</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the SPD always answers long
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-success">Zustimmung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/cdu.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Christlich Demokratische Union</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-danger">Ablehnung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/fdp.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Freie Demokratische Partei</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-info">Enthaltung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/spd.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Sozialdemokratische Partei Deutschlands</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the SPD always answers long
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-success">Zustimmung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/cdu.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Christlich Demokratische Union</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-danger">Ablehnung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/fdp.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Freie Demokratische Partei</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-info">Enthaltung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/spd.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Sozialdemokratische Partei Deutschlands</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the SPD always answers long
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-success">Zustimmung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/cdu.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Christlich Demokratische Union</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-danger">Ablehnung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/fdp.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Freie Demokratische Partei</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-info">Enthaltung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/spd.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Sozialdemokratische Partei Deutschlands</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the SPD always answers long
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-success">Zustimmung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/cdu.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Christlich Demokratische Union</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-danger">Ablehnung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4 col-lg-3 mt-4">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="images/fdp.png">
|
||||
<div class="card-block">
|
||||
<h4 class="card-title">Freie Demokratische Partei</h4>
|
||||
<div class="card-text">
|
||||
THis is a long answer because the CDU always answers long too
|
||||
</div>
|
||||
|
||||
<div class="card-text">
|
||||
<button type="button" class="btn btn-info">Enthaltung</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('myChart').getContext('2d');
|
||||
var myDoughnutChart = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [4, 4, 4],
|
||||
backgroundColor: [ '#5cb85c', '#5bc0de', '#d9534f']
|
||||
}],
|
||||
|
||||
// These labels appear in the legend and in the tooltips when hovering different arcs
|
||||
labels: [
|
||||
'Zustimmung',
|
||||
'Enthaltung',
|
||||
'Ablehnung'
|
||||
]
|
||||
},
|
||||
options: {}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user