Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (solothurn) Browse

R8244/client/src/app/survey-v1/branch2-r/branch2-r.component.html
ab4146932734solothurn

Last Change
Raw File

branch2-r.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="26"
aria-valuemin="0" aria-valuemax="100" style="width:26%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">26% Complete</span>
</div>
</div>
<div class="containecenter">
<div class="jumbotron">
<div class="col"><h1></h1></div>
<div class="col"><p class="lead">Sie haben die Optionen angeordnet und können jetzt unten Ihre gewählte Reihenfolge sehen.
<br>Ganz oben in der Liste steht Ihre bevorzugte Option. Bei dieser Option ist Ihr wichtigstes Ziel auf dem besten Niveau. Weil es Ihr wichtigstes Ziel ist, wird für diese Option 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 die tiefste Punktzahl (0) festgelegt.
<br><i>Bitte legen Sie nun Punkte für die Optionen dazwischen fest.</i>
<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><i>Denken Sie daran: Alles ist relativ! Wenn die Verbesserung eines Ziels vom schlechtesten zum besten Niveau 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>
</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 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="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 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="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/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="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/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 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="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/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="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 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>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