Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

R8244/client/src/app/survey-v1/branch4-r/branch4-r.component.html
6c7652c281b9master

Last Change
Raw File

branch4-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:67%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">67% 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 sehen 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. 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 Option 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><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 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 class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" #slider id="myRange2" (input)="doSomething(slider.value)">
<p>1 <span class="slider_label"></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 class="col align-self-center">
<div class="slidecontainer">
<input type="range" min="0" max="0" value="0" 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