Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (solothurn) Browse

R8244/client/src/app/survey-v1/branch-ul-r/branch-ul-r.component.html
50cae68ee452solothurn

Last Change
Raw File

branch-ul-r.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:88%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">88% Complete</span>
</div>
</div>
<div class="containecenter">
<div class="jumbotron">
<div class="col"><h1></h1></div>
<div class="col"><p class="lead"> Und nun noch zum letzten Schritt! Du hast die Optionen angeordnet und kannst jetzt unten Deine gewählte Reihenfolge sehen.
<br>Ganz oben in der Liste steht Deine bevorzugte Option. Bei dieser Option ist Dein wichtigstes Ziel auf dem besten Niveau. Weil es Dein wichtigstes Ziel ist, wird für diese Option die höchste Punktzahl (100) festgelegt.
Die schlechteste Option (mit allen Zielen auf dem schlechtesten Niveau) steht ganz unten in der Liste. Für sie wird deshalb die tiefste Punktzahl (0) festgelegt.
<br><i>Bitte lege nun Punkte für die Optionen dazwischen fest.</i>
<br><i>Du kannst alle möglichen Punkte zwischen 1 und 100 vergeben. Benutze dafür den Schieberegler. Wenn Du einer Option 100 Punkte gibst, bedeutet das, dass die Verbesserung dieses Ziels auf das beste Niveau genauso wichtig ist wie die Verbesserung Deines wichtigsten Ziels auf das beste Niveau.</i>
<br><i>Denke daran: Alles ist relativ! Wenn die Verbesserung eines Ziels vom schlechtesten zum besten Niveau halb so wichtig ist wie die Verbesserung eines anderen Ziels, gib diesem Ziel die Hälfte der Punkte. Wenn die Verbesserung zweier Ziele gleich wichtig ist, gib ihnen die gleichen Punkte.</i>
</p></div>
<div class="container">
<!-- first -->
<div clsas="row">
<div class="card-group">
<div id="Element1-1" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/up.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{firstObj_best}} {{firstObj_unit}} </b></span>
</div>
<div class="card-footer bg-transparent border-success">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/good.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: x-small;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-2" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{secondObj_worst}} {{secondObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-3" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{thirdObj_worst}} {{thirdObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-4" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{forthObj_worst}} {{forthObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="100" max="100" value="100" class="slidersquare" id="myRange2" style="-webkit-transform: rotateY(180deg);">
<p style="text-align: right;">100 </p>
</div>
</div>
</div>
</div>
<!-- second -->
<div clsas="row">
<div class="card-group">
<div id="Element2-1" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{firstObj_worst}} {{firstObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;">{{secondObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/up.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{secondObj_best}} {{secondObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-success">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/good.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: x-small;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{thirdObj_worst}} {{thirdObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-4" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{forthObj_worst}} {{forthObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" #slider1 id="range1">
<p><span id="tota">1</span> </p>
</div>
</div>
</div>
</div>
<!-- third -->
<div clsas="row">
<div class="card-group">
<div id="Element3-1" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{firstObj_worst}} {{firstObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-2" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{secondObj_worst}} {{secondObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-3" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/up.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{thirdObj_best}} {{thirdObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-success">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/good.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: x-small;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-4" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{forthObj_worst}} {{forthObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" #slider2 id="range2">
<p> <span id="totb">1</span> </p>
</div>
</div>
</div>
</div>
<!--fourth -->
<div clsas="row">
<div class="card-group">
<div id="Element4-1" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{firstObj_worst}} {{firstObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-2" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{secondObj_worst}} {{secondObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-3" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{thirdObj_worst}} {{thirdObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-4" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/up.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{forthObj_best}} {{forthObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-success">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/good.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: x-small;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" #slider3 id="range3">
<p> <span id="totc">1</span> </p>
</div>
</div>
</div>
</div>
<!-- fifth -->
<div clsas="row">
<div class="card-group">
<div id="Element5-1" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{firstObj_worst}} {{firstObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-2" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{secondObj_worst}} {{secondObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-3" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{thirdObj_worst}} {{thirdObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-4" clsas="col"><div class="card" style="width: 12rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_best}}</span>
</div>
<div class="row">
<img src="assets/img/white.png" alt="" width="30" height="60" class="pic">
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: x-small;"><b> {{forthObj_worst}} {{forthObj_unit}}</b></span>
</div>
<div class="card-footer bg-transparent border-danger">
<div class="row">
<div class="col-sm-1">
<img src="assets/img/bad.png" alt="" width="25" height="30" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: x-small;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="100" max="100" value="100" class="slidersquare" id="myRange2">
<p> 0 </p>
</div>
</div>
</div>
</div>
<br>
<p>Die Optionen sind nach Deinen Präferenzen angeordnet. Daher sollten die Optionen an der Spitze tendenziell mehr (oder maximal gleich viele) Punkte erhalten als die darunter stehenden Optionen. Ist dies so?
<br>Bist Du mit den vergebenen Punkten zufrieden?
<br><i>Wenn nicht, passe die Punkte nochmal an. </i>
<br><i>Wenn Du denkst, dass die Punkte Deine Präferenzen widerspiegeln, klicke auf «Weiter».</i>
</p>
<br><br>
<div class="col"> <a class="btn btn-lg btn-primary float-right" [routerLink]="" (click)="next()" role="button">Weiter</a></div>
</div>
</div>
</div>
<footer class="footer fixed-bottom">
<div class="container">
<span class="text-muted">Copyright Eawag © 2018</span>
</div>
</footer>
c4science · Help