imported>Mnlmachtschule |
imported>Mnlmachtschule |
Zeile 1: |
Zeile 1: |
− | | + | {{FragebogenTemplate}} |
− | | |
− | #qTable td {padding:3px 1em; border:1px solid #ccc; border-radius:5px; background-color:#FeF; font-family:"Segoe UI"}
| |
− | #qTable {width:100%; border-spacing:0.5em}
| |
− | #qTable li {cursor:pointer}
| |
− | #qTable li:hover { text-decoration:underline}
| |
− | #qTable tr:nth-child(n+2) {display:none}
| |
− | #qTable p {font-weight:bold; line-height:50%}
| |
− | | |
− | #errdiv {display:none; font-weight:bold; color:#903; padding:0.3em}
| |
− | .selectedAnswer {font-weight:bold; color:#060}
| |
− | | |
− | i {display:none}
| |
− | | |
− | | |
− | | |
− | <html>
| |
− | <div id="errdiv"></div>
| |
− | <table id="qTable" >
| |
− | <tr>
| |
− | <td><p>The Applicant is a: </p>
| |
− | <ul>
| |
− | <li>Person <i>2</i></li>
| |
− | <li>Corporation <i>3</i></li>
| |
− | </ul></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td><p>The person live in: </p>
| |
− | <ul>
| |
− | <li>Grande Oak Estates <i>11</i></li>
| |
− | <li>Other neighborhood <i>4</i></li>
| |
− | </ul></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td><p>The corporation's annual sales are:</p>
| |
− | <ul>
| |
− | <li>$5 million or more <i>10</i></li>
| |
− | <li>Less than $ 5 million <i>6</i></li>
| |
− | </ul></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td><p>What is the person's golf handicap?</p>
| |
− | <ul>
| |
− | <li>Less than 5 <i>8</i></li>
| |
− | <li>5 or more <i>5</i></li>
| |
− | </ul></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td><p>What is the person's net worth?</p>
| |
− | <ul>
| |
− | <li>$2 million or more <i>9</i></li>
| |
− | <li>Less than $2 million<i>7</i></li>
| |
− | </ul></td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The corporation does not qualify for a membership </td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The person does not qualify for a membership </td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The person qualifies for a discounted membership</td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The person qualifies for a regular membership</td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The corporation qualifies for a corporate membership</td>
| |
− | </tr>
| |
− | <tr>
| |
− | <td>The person qualifies for a regular membership</td>
| |
− | </tr>
| |
− | </table>
| |
− | | |
− | <script type="text/javascript">
| |
− | //<![CDATA[
| |
− | | |
− | | |
− | $(document).ready(function() {
| |
− | //checks difference between number of rows and ids. If none, guide is complete and code can be removed.
| |
− | //if a result is used in more that one question reduce the value or results by the number of reuses
| |
− | var rows = $('#qTable tr').length - 1;
| |
− | var liids = $('#qTable li').length;
| |
− | if(rows != liids) {
| |
− | $('#errdiv').html('Number of rows ( ' + rows + ' ) does not match the number of questions ( ' +liids + ' )').show()
| |
− | }
| |
− | | |
− | $('#qTable li').on('click',function() {
| |
− | //style the selected answer
| |
− | $(this).addClass('selectedAnswer').siblings().removeClass('selectedAnswer');
| |
− | //find the id of the first question in the graoup
| |
− | //var q1id = $(this).parent().children('li:first').find('i').text();
| |
− | //hide all rows after the currently displayed row and remove selectedAnswer style
| |
− | var rowCurrent = $(this).closest("tr").prevAll("tr").length + 2;
| |
− | var rowsAfter = ' tr:nth-child(n+' + rowCurrent + ')';
| |
− | $('#qTable' + rowsAfter).hide().find('li').removeClass('selectedAnswer');
| |
− | //show the next row that matches the question id
| |
− | var italNum = $(this).find('i').text();
| |
− | var qNext = ' tr:nth-child(' + italNum + ')';
| |
− | $('#qTable' + qNext).fadeIn(800);
| |
− | //scroll code to bring next question into view
| |
− | var qNextPos = $('#qTable' + qNext).offset();
| |
− | var qNextTop = qNextPos.top;
| |
− | var qNextHigh = $('#qTable' + qNext).height();
| |
− | var qNextBot = qNextHigh + qNextTop + 20;
| |
− | var scrHigh = $(window).innerHeight();
| |
− | var difHigh = qNextBot - scrHigh;
| |
− | if(difHigh > 0) {window.scrollTo(0, difHigh)}
| |
− | })
| |
− | }) | |
− | //]]>
| |
− | </script>
| |
− | | |
− | | |
− | </html>
| |