Homec4science
Diffusion Eawag_Swing_Weight_Elicitation (master) Browse

R8244/client/src/app/survey-v1/branch3/branch3.component.html
cf0bc95d990amaster

Last Change
Raw File

branch3.component.html
View Options

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:40%; z-index: 1;
height: 15px; position: fixed; top: 0;">
<span class="sr-only">40% 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 eine hohe soziale Akzeptanz erhalten. Insbesondere sollte sie erreichen:<br>
<ul>
<li>- hohen Gesundheitsschutz für Endverbraucher/-innen,</li>
<li>- hohe Attraktivität der Installationen (z. B. des WC) für Endverbraucher/-innen,</li>
<li>- niedrigeren Zeitaufwand für Endverbraucher/-innen.</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, bei dem diese drei Ziele auf dem schlechtesten Niveau liegen. Diese schlechteste Option bedeutet, dass der Endverbraucher 5 Mal pro Jahr mit Teilen des Abwassersystems in Kontakt kommt, die installierten Anlagen zur Abwasserentsorgung im Haus und / oder Garten eher unattraktiv sind (3 auf einer Skala von 0 bis 10) und der Endverbraucher 24 Stunden pro Jahr damit verbringt, das gute Funktionieren des Systems zu überprüfen. 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: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[5].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[5].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[5].worst}} {{this.hl.heirarchyList[5].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[5].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-2" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[6].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[6].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[6].worst}} {{this.hl.heirarchyList[6].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[6].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Elementbad-3" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[7].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[7].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[7].worst}} {{this.hl.heirarchyList[7].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[7].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 drei 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 nun <b>das Ziel, das für Sie wichtiger ist, zuerst</b> vom schlechtesten zum besten Zustand zu verbessern. Achten Sie dabei bitte auf die Grösse der Änderung, d. h. den Unterschied zwischen dem besten und dem schlechtesten Fall. Es besteht die Möglichkeit, dass Verbraucher/-innen keinen Kontakt zum Abwassersystem haben (0 Mal pro Jahr) oder dass die Sanitärinstallationen sehr attraktiv sind (10 auf einer Skala von 0 bis 10) oder kein Zeitaufwand für Endverbraucher entsteht (0 Std. pro Jahr), während die anderen Ziele auf dem schlechtesten Niveau bleiben.<br>
<i><b>Ziehen Sie die Option, in der das für Sie wichtigste Ziel verbessert ist</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). Welches ist die Option, in der <b>das für Sie zweitwichtigste Ziel</b> vom schlechtesten zum besten Fall verbessert wird?<br>
<i>Ziehen Sie 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 derListe?<br>
<i>Wenn nicht, ziehen Sie bitte <b>dieses drittwichtigste Ziel</b> auf die dritte Position 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><br>
<br>
</span>
</div>
</div>
</div>
<br><br>
<div id="sortable" class="center">
<!-- first -->
<div id="{{this.hl.heirarchyList[5].objName}}" clsas="row">
<div class="card-group">
<div id="Element1-1" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[5].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[5].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[5].best}} {{this.hl.heirarchyList[5].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[5].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-2" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[6].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[6].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[6].worst}} {{this.hl.heirarchyList[6].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[6].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element1-3" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[7].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[7].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[7].worst}} {{this.hl.heirarchyList[7].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[7].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- second -->
<div id="{{this.hl.heirarchyList[6].objName}}" clsas="row">
<div class="card-group">
<div id="Element2-1" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[5].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[5].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[5].worst}} {{this.hl.heirarchyList[5].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[5].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[6].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[6].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[6].best}} {{this.hl.heirarchyList[6].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[6].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[7].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[7].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[7].worst}} {{this.hl.heirarchyList[7].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[7].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--third-->
<div id="{{this.hl.heirarchyList[7].objName}}" clsas="row">
<div class="card-group">
<div id="Element2-1" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[5].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[5].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[5].worst}} {{this.hl.heirarchyList[5].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[5].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-2" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[6].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[6].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[6].worst}} {{this.hl.heirarchyList[6].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[6].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element2-3" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;">{{this.hl.heirarchyList[7].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[7].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[7].best}} {{this.hl.heirarchyList[7].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[7].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: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[5].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[5].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[5].worst}} {{this.hl.heirarchyList[5].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[5].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-2" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[6].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[6].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[6].worst}} {{this.hl.heirarchyList[6].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[6].objFull}}</div>
</div>
</div>
</div>
</div>
</div>
<div id="Element3-3" clsas="col"><div class="card" style="width: 14rem;">
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.9em;"> {{this.hl.heirarchyList[7].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[7].worst}}</span>
</div>
<div class="row">
<span style="width: 100%;text-align: center;font-size: 0.75em;"><b> {{this.hl.heirarchyList[7].worst}} {{this.hl.heirarchyList[7].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[7].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)="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