Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

R8244/client/src/app/survey-v1/branch-ul-r/branch-ul-r.component.html
27dce68d05femaster

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! Sie haben die Optionen geordnet und sehen jetzt unten Ihre gewählte Reihenfolge.
<br>Ganz oben in der Liste steht Ihre bevorzugte Option. Bei dieser Option ist Ihr wichtigstes Ziel auf dem besten Niveau. Deswegen wird für diese Option automatisch die höchste Punktzahl (100) festgelegt.
<br>Die schlechteste Option (mit allen Zielen auf dem schlechtesten Niveau) steht ganz unten in der Liste. Für sie wird deshalb automatisch die tiefste Punktzahl (0) festgelegt.
<br>
<br><i>Bitte legen Sie nun Punkte für die Optionen dazwischen fest.</i>
<br>
<br><i>Sie können alle möglichen Punkte zwischen 1 und 100 vergeben. Benutzen Sie dafür den Schieberegler. Wenn Sie einer Option 100 Punkte geben, bedeutet das, dass die Verbesserung dieses Ziels auf das beste Niveau genauso wichtig ist wie die Verbesserung Ihres wichtigsten Ziels auf das beste Niveau.</i>
<br><br><i>Denken Sie daran: Alles ist relativ! Wenn die Verbesserung vom schlechtesten auf das beste Niveau eines Ziels halb so wichtig ist wie die Verbesserung eines anderen Ziels, geben Sie diesem Ziel die Hälfte der Punkte. Wenn die Verbesserung zweier Ziele gleich wichtig ist, geben Sie ihnen die gleichen Punkte.</i>
<br><br>
</p></div>
<div class="container">
<!-- first -->
<div clsas="row">
<div class="card-group">
<div id="Element1-1" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-2" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-3" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-4" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{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: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{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: 0.9em;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-4" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{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: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-2" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-3" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: 0.9em;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-4" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{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: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-2" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-3" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element4-4" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: green;font-size: 0.9em;">{{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: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{firstObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-2" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{secondObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-3" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{thirdObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{thirdObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element5-4" clsas="col"><div class="card" style="width: 15rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{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: 0.9em;"> {{forthObj_worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><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" >
</div>
<div class="col-sm-10">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{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 Ihren Präferenzen angeordnet. Daher sollten die Optionen an der Spitze tendenziell mehr (oder maximal gleich viele) Punkte erhalten als die darunter stehenden Optionen.
<br><br>Sind Sie mit den vergebenen Punkten zufrieden?
<br><i>Wenn nicht, passen Sie die Punkte nochmal an.</i>
<br><i>Wenn Sie denken, dass die Punkte Ihre Präferenzen widerspiegeln, klicken Sie 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