Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

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

Last Change
Raw File

branch2.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="19"
aria-valuemin="0" aria-valuemax="100" style="width:19%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">19% Complete</span>
</div>
</div>
<div class="containecenter">
<div class="jumbotron">
<div class="col"><h1></h1></div>
<div class="col"><p class="lead">Die Abwasserwirtschaft sollte die natürlichen Ressourcen nachhaltig nutzen. Insbesondere sollte sie ermöglichen:<br>
<ul>
<li>- eine hohe Rückgewinnung von Nährstoffen für Dünger</li>
<li>- einen niedrigeren Wasserverbrauch für die Toilettenspülung</li>
<li>- einen niedrigeren netto Energieverbrauch zur Reinigung des Abwassers</li>
</ul>
Wenn Sie möchten, schauen Sie sich die Informationen über die Ziele der Abwasserwirtschaft aus dem letzten Teil jetzt noch einmal an.<br><br>
Stellen Sie sich ein Abwassersystem vor, das alle Ziele schlecht erfüllt: die Rückgewinnung von Nährstoffen für Dünger, der Wasserverbrauch und der netto Energieverbrauch sind alle auf dem schlechtesten Niveau. Diese schlechteste Option bedeutet, dass kein Nährstoff für Dünger zurückgewonnen wird, 27 Liter Wasser pro Person und Tag für die Toilettenspülung gebraucht werden und 280 kWh pro Person und Jahr für die Reinigung des Abwassers verbraucht werden. Diese schlechteste Option ist hier dargestellt.<br>
</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: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[2].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[2].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[2].worst}} {{this.hl.heirarchyList[2].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: small;">{{this.hl.heirarchyList[2].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-2" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[3].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[3].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[3].worst}} {{this.hl.heirarchyList[3].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: small;">{{this.hl.heirarchyList[3].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-3" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[4].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[4].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[4].worst}} {{this.hl.heirarchyList[4].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: small;">{{this.hl.heirarchyList[4].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. <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. 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 bestem und dem schlechtesten Fall. Sie haben die Möglichkeit, entweder 81 % der Nährstoffe zurück zu gewinnen oder kein Wasser für die Toilettenspülung zu benötigen (0 Liter pro Person und Tag) oder einen sehr geringen Nettoenergieverbrauch (15 kWh pro Person und Jahr) zu haben, während die anderen Ziele auf dem schlechtesten Niveau bleiben.<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 nun vor, dass jetzt alle Ziele wieder auf dem schlechtesten Niveau sind (Option ganz unten in der Liste). Welche ist die Option, in der <b>das für Sie zweitwichtigste Ziel</b> vom schlechtesten zum besten Zustand verbessert wird?<br>
<i>Ziehen Sie mit dem Mauszeiger diese Option auf den zweiten Platz in der Liste.</i><br>
<br>
Ist <b>das drittwichtigste Ziel</b> für Sie, an der dritten Stelle in der Liste?<br>
<i>Wenn nicht, ziehen Sie bitte <b>dieses drittwichtigste Ziel</b> auf die dritte Position in der Liste.</i><br>
<br>
</span>
</div>
</div>
</div>
<br><br>
<div id="sortable" class="center">
<!-- first -->
<div id="{{this.hl.heirarchyList[2].objName}}" clsas="row">
<div class="card-group">
<div id="Element1-1" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[2].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[2].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[2].best}} {{this.hl.heirarchyList[2].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: small;">{{this.hl.heirarchyList[2].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-2" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[3].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[3].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[3].worst}} {{this.hl.heirarchyList[3].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: small;">{{this.hl.heirarchyList[3].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-3" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[4].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[4].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[4].worst}} {{this.hl.heirarchyList[4].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: small;">{{this.hl.heirarchyList[4].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="{{this.hl.heirarchyList[3].objName}}" clsas="row">
<div class="card-group">
<div id="Element2-1" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[2].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[2].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[2].worst}} {{this.hl.heirarchyList[2].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: small;">{{this.hl.heirarchyList[2].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[3].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[3].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[3].best}} {{this.hl.heirarchyList[3].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: small;">{{this.hl.heirarchyList[3].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[4].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[4].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[4].worst}} {{this.hl.heirarchyList[4].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: small;">{{this.hl.heirarchyList[4].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--third-->
<div id="{{this.hl.heirarchyList[4].objName}}" clsas="row">
<div class="card-group">
<div id="Element2-1" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[2].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[2].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[2].worst}} {{this.hl.heirarchyList[2].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: small;">{{this.hl.heirarchyList[2].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[3].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[3].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[3].worst}} {{this.hl.heirarchyList[3].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: small;">{{this.hl.heirarchyList[3].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[4].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[4].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[4].best}} {{this.hl.heirarchyList[4].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: small;">{{this.hl.heirarchyList[4].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- fourth -->
<div clsas="row" class="center">
<div class="card-group">
<div id="Element3-1" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[2].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[2].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[2].worst}} {{this.hl.heirarchyList[2].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: small;">{{this.hl.heirarchyList[2].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-2" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[3].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[3].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[3].worst}} {{this.hl.heirarchyList[3].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: small;">{{this.hl.heirarchyList[3].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-3" clsas="col"><div class="card" style="width: 13rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[4].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[4].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[4].worst}} {{this.hl.heirarchyList[4].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: small;">{{this.hl.heirarchyList[4].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<p>
<br>
Entspricht diese Reihenfolge nun Ihren Präferenzen?<br>
<i>Bitte ändern Sie die Reihenfolge, wenn Sie möchten. Wichtig ist, dass Sie Ihre persönlichen 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><br>
<br><i>Wenn Sie mit Ihrer Reihenfolge zufrieden sind, klicken 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