Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

R8244/client/src/app/survey-v1/branch-ul/branch-ul.component.html
6c7652c281b9master

Last Change
Raw File

branch-ul.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:80%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">80% Complete</span>
</div>
</div>
<div class="containecenter">
<div class="jumbotron">
<div class="col"><h1></h1></div>
<div class="col"><p class="lead">Jetzt geht es darum, die Wichtigkeit der einzelnen Themen zu vergleichen. Dafür werden Sie den gleichen Prozess wie zuvor wiederholen: Ordnen Sie zuerst die Ziele entsprechend Ihrer Präferenz, welches Ziel zuerst, als zweites usw. vom schlechtesten auf das beste Niveau verbessert werden sollte. Dann vergeben Sie wieder Punkte. Einziger Unterschied: Jetzt vergleichen wir Ihre wichtigsten Ziele aus den vier Themen.
<br>Stellen Sie sich noch einmal ein Abwassersystem vor, bei dem alle vier Ziele schlecht erfüllt werden und somit alle auf dem schlechtesten Niveau sind. Wenn Sie möchten, schauen Sie sich die Informationen über die Ziele der Abwasserwirtschaft aus dem letzten Teil jetzt noch einmal an.
<br><br>
Diese schlechteste Option ist hier dargestellt.
</p></div>
<br>
<div class="container">
<div class="row">
<div clsas="col-sm ">
<div class="card-group">
<div id="Elementbad-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: auto;text-align: center; color: red;font-size: 0.9em;">{{firstObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-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: auto;text-align: center; color: red;font-size: 0.9em;">{{secondObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-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: auto;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_best}} {{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>
</div>
<div class="row-sm">
<span>Stellen Sie sich vor, Sie können diese schlechteste Option verbessern, indem eines der Ziele vom schlechtesten auf das beste Niveau ändern können.
<br>Die Option am Ende der Liste ist die am wenigsten bevorzugte: Hier sind
<b>alle Ziele auf dem schlechtesten Niveau</b>.
<br>Wählen Sie <b>das Ziel, das für Sie am wichtigsten ist. Das heisst, dieses Ziel soll zuerst</b> vom schlechtesten auf den besten Zustand verbessert werden. Achten Sie dabei bitte auf die Grösse der Änderung, d.h. den Unterschied zwischen dem besten und
dem schlechtesten Fall.<br>
<i><b>Ziehen Sie mit dem Mauszeiger die Option, in der das für Sie wichtigste Ziel verbessert wird</b>, an den Anfang der Liste („drag and drop“).</i><br>
<br>
Stellen Sie sich vor, dass jetzt alle Ziele wieder auf dem schlechtesten Niveau sind (Option ganz unten in der Liste). Welches ist die Option, in der <b>das für Sie zweitwichtigste Ziel</b> vom schlechtesten zum besten Fall verbessert ist?<br>
<i>Ziehen Sie diese Option auf den zweiten Platz in der Liste. </i><br>
<br>
Stellen Sie sich vor, dass jetzt alle Ziele wieder auf dem schlechtesten Niveau sind (Option ganz unten in der Liste). Welches ist die Option, in der <b>das für Sie drittwichtigste Ziel</b> vom schlechtesten zum besten Fall verbessert ist?<br>
<i>Ziehen Sie diese Option auf den dritten Platz in der Liste.</i> <br>
<br>
Ist <b>das viertwichtigste Ziel</b> für Sie, an der vierten Stelle in der Liste?<br>
<i>Wenn nicht, ziehen Sie bitte <b>dieses viertwichtigste Ziel</b> auf die vierte Position in der Liste.</i><br>
</span>
</div>
</div>
</div>
<br><br>
<div id="sortable" class="center">
<!-- first -->
<div id="{{firstObj}}" 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-9">
<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-9">
<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-9">
<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-9">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="{{secondObj}}" 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-9">
<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-9">
<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-9">
<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-9">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--third-->
<div id="{{thirdObj}}" 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-9">
<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/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-9">
<div style="width: 100%;text-align: center; color: red;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/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-9">
<div style="width: 100%;text-align: center; color: green;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-9">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--fourth-->
<div id="{{forthObj}}" 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-9">
<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-9">
<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-9">
<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-9">
<div style="width: 100%;text-align: center; color: green;font-size: 0.9em;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fifth -->
<div clsas="row" class="center">
<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-9">
<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-9">
<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-9">
<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-9">
<div style="width: 100%;text-align: center; color: red;font-size: 0.9em;">{{forthObj_full}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<p>
<br>
Entspricht diese Reihenfolge nun Ihren Prioritäten?<br>
<br><i>Bitte ändern Sie die Reihenfolge, wenn Sie möchten. Wichtig ist, dass Sie Ihre eigenen Präferenzen ausdrücken! </i>
<br><i>Vergessen Sie nicht, dabei auf die Grösse der Änderungen zu achten.</i>
<br><i>Wenn Sie mit Ihrer Reihenfolge zufrieden sind, klicken Sie auf «Weiter».</i>
</p>
<br><br>
<div class="col"> <a class="btn btn-lg btn-primary float-right" [routerLink]="" (click)="nextrate()" role="button">Weiter</a></div>
</div>
</div>
<footer class="footer fixed-bottom">
<div class="container">
<span class="text-muted">Copyright Eawag © 2018</span>
</div>
</footer>
c4science · Help