Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

R8244/client/src/app/survey-v1/branch1/branch1.component.html
27dce68d05femaster

Last Change
Raw File

branch1.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:0%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">0% Complete</span>
</div>
</div>
<div class="containecenter">
<div class="jumbotron">
<div class="col"><h1></h1></div>
<div class="col"><p class="lead">Abwassersysteme sollen die Umwelt schützen und die Verschmutzung der Gewässer verhindern. Deshalb reinigen Kläranlagen das Abwasser von unerwünschten Stoffen, bevor sie es in einen Fluss oder See einleiten. Das übergeordnete Thema „Verschmutzung der Gewässer“ wird durch zwei Ziele definiert: „Gute Reinigung von Stickstoffverbindungen” und „Gute Reinigung von Mikroverunreinigungen”.
<br>Wenn Sie möchten, schauen Sie sich die Informationen über die Ziele der Abwasserwirtschaft aus dem letzten Teil jetzt noch einmal an.
<br>Stellen Sie sich ein Abwassersystem vor, bei dem alle Ziele auf dem schlechtesten Niveau liegen. Diese schlechteste Option bedeutet, dass nur 20% der giftigen Stickstoffverbindungen und 7% der Mikroverunreinigungen entfernt werden. Diese schlechteste Option ist hier dargestellt.
</p></div>
<br>
<div class="container">
<div class="row">
<div clsas="col-sm" style="margin: auto !important;">
<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;"> {{this.hl.heirarchyList[0].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;"> {{this.hl.heirarchyList[0].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[0].worst}} {{this.hl.heirarchyList[0].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;">{{this.hl.heirarchyList[0].objFull}}</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;"> {{this.hl.heirarchyList[1].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;"> {{this.hl.heirarchyList[1].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[1].worst}} {{this.hl.heirarchyList[1].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;">{{this.hl.heirarchyList[1].objFull}}</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 Sie eines der Ziele vom schlechtesten auf das beste Niveau ändern können. Welches Ziel würden Sie verbessern?
<br>
<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</b>. Das heisst, dieses Ziel soll <b>zuerst</b> vom schlechtesten zum 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. Sie haben die Möglichkeit, entweder 90% der giftigen Stickstoffverbindungen oder 90% der Mikroverunreinigungen zu entfernen, während das jeweils andere Ziel auf dem schlechtesten Niveau bleibt.
<br><i><b>Ziehen Sie mit dem Mauszieger die Option, in der das für Sie wichtigste Ziel verbessert wird</b>, an den Anfang der Liste („drag and drop“).</i>
<br>
<br>Welche ist die Option, bei der <b>das für Sie zweitwichtigste Ziel</b> vom schlechtesten in den besten Zustand verbessert wird?
<br><i>Ziehen Sie diese Option auf den zweiten Platz in der Liste. </i>
<br>
<br>Entspricht diese Reihenfolge nun Ihren Präferenzen?
<br><i>Bitte ändern Sie die Reihenfolge, wenn Sie möchten. Wichtig ist, dass Sie Ihre eigenen Präferenzen ausdrücken! Vergessen Sie nicht, dabei auf die Grösse der Änderungen zu achten (d. h. den Abstand zwischen bestem und schlechtestem Niveau).</i>
</span>
</div>
</div>
</div>
<br><br>
<div id="sortable" style="margin: auto !important; width: 50% !important;">
<!-- first -->
<div id="{{this.hl.heirarchyList[0].objName}}" 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;"> {{this.hl.heirarchyList[0].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;"> {{this.hl.heirarchyList[0].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[0].best}} {{this.hl.heirarchyList[0].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;">{{this.hl.heirarchyList[0].objFull}}</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;"> {{this.hl.heirarchyList[1].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;"> {{this.hl.heirarchyList[1].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[1].worst}} {{this.hl.heirarchyList[1].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;">{{this.hl.heirarchyList[1].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="{{this.hl.heirarchyList[1].objName}}" 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;"> {{this.hl.heirarchyList[0].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;"> {{this.hl.heirarchyList[0].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[0].worst}} {{this.hl.heirarchyList[0].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;">{{this.hl.heirarchyList[0].objFull}}</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;">{{this.hl.heirarchyList[1].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;"> {{this.hl.heirarchyList[1].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[1].best}} {{this.hl.heirarchyList[1].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;">{{this.hl.heirarchyList[1].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- third -->
<div clsas="row" style="margin: auto !important; width: 50% !important;">
<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;"> {{this.hl.heirarchyList[0].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;"> {{this.hl.heirarchyList[0].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[0].worst}} {{this.hl.heirarchyList[0].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;">{{this.hl.heirarchyList[0].objFull}}</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;"> {{this.hl.heirarchyList[1].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;"> {{this.hl.heirarchyList[1].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[1].worst}} {{this.hl.heirarchyList[1].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;">{{this.hl.heirarchyList[1].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<p>
<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)="next()" 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