beet/good_cheap_fast.html

## good_cheap_fast.html
<!DOCTYPE html>
<html>
  <head>
    <title>Good, Fast, Cheap</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
  </head>

  <body>
    <h1>Product requirements survey</h1>

    <p>Which attributes do you require for this product?</p>

    <div>
      <p>
        <input type="checkbox" id="good" name="good" />
        <label for="good">I need the quality to be good</label>
      </p>

      <p>
        <input type="checkbox" id="cheap" name="cheap" />
        <label for="cheap">I need the cost to be low</label>
      </p>

      <p>
        <input type="checkbox" id="fast" name="fast" />
        <label for="fast">I need it to be delivered quickly</label>
      </p>
    </div>

    <div class="conflictExplanations" id="goodConflictExplanation" style="display:none;">
      <p>To deliver a quality product at low cost is possible, but will take more time.</p>

      <p>Speed could be increased by reducing the feature scope and carefully defining clear requirements beforehand.</p>
    </div>

    <div class="conflictExplanations" id="cheapConflictExplanation" style="display:none;">
      <p>To deliver the product quickly at a low cost will compromise the quality.</p>

      <p>Quality could be achieved by embracing constraints and using off-the-shelf solutions.</p>
    </div>

    <div class="conflictExplanations" id="fastConflictExplanation" style="display:none;">
      <p>To deliver a quality product quickly will be expensive.</p>

      <p>Cost could be reduced by reducing the feature scope and delivering less product.</p>
    </div>
  </body>

  <script type="text/javascript">
    // Hash of conflicting qualities. When all three have been chosen, if the
    // last one to be selected was fast for example, it conflicts with cheap,
    // which must be deselected.
    var conflicts = {
      fast: "cheap",
      cheap: "good",
      good: "fast"
    };


    $("input[type=checkbox]").on("change", function(event) {
      $(".conflictExplanations").hide();

      var selectedQualities = $("input:checked");

      if (selectedQualities.length == 3) {
        var selectedQualityName = this.name;

        var conflictingQualityName = conflicts[selectedQualityName];

        console.log("Selected quality " + selectedQualityName + " conflicts with " + conflictingQualityName);

        var conflictingQuality = $("input[name='" + conflictingQualityName + "']");

        conflictingQuality.prop("checked", false);

        var conflictExplanation = $("#" + selectedQualityName + "ConflictExplanation");

        conflictExplanation.show();
      }
    });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Good, Fast, Cheap</title>

	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
	</head>

	<body>
	<h1>Product requirements survey</h1>

	<p>Which attributes do you require for this product?</p>

	<div>
	<p>
	<input type="checkbox" id="good" name="good" />
	<label for="good">I need the quality to be good</label>
	</p>

	<p>
	<input type="checkbox" id="cheap" name="cheap" />
	<label for="cheap">I need the cost to be low</label>
	</p>

	<p>
	<input type="checkbox" id="fast" name="fast" />
	<label for="fast">I need it to be delivered quickly</label>
	</p>
	</div>

	<div class="conflictExplanations" id="goodConflictExplanation" style="display:none;">
	<p>To deliver a quality product at low cost is possible, but will take more time.</p>

	<p>Speed could be increased by reducing the feature scope and carefully defining clear requirements beforehand.</p>
	</div>

	<div class="conflictExplanations" id="cheapConflictExplanation" style="display:none;">
	<p>To deliver the product quickly at a low cost will compromise the quality.</p>

	<p>Quality could be achieved by embracing constraints and using off-the-shelf solutions.</p>
	</div>

	<div class="conflictExplanations" id="fastConflictExplanation" style="display:none;">
	<p>To deliver a quality product quickly will be expensive.</p>

	<p>Cost could be reduced by reducing the feature scope and delivering less product.</p>
	</div>
	</body>

	<script type="text/javascript">
	// Hash of conflicting qualities. When all three have been chosen, if the
	// last one to be selected was fast for example, it conflicts with cheap,
	// which must be deselected.
	var conflicts = {
	fast: "cheap",
	cheap: "good",
	good: "fast"
	};



	$("input[type=checkbox]").on("change", function(event) {
	$(".conflictExplanations").hide();

	var selectedQualities = $("input:checked");

	if (selectedQualities.length == 3) {
	var selectedQualityName = this.name;

	var conflictingQualityName = conflicts[selectedQualityName];

	console.log("Selected quality " + selectedQualityName + " conflicts with " + conflictingQualityName);

	var conflictingQuality = $("input[name='" + conflictingQualityName + "']");

	conflictingQuality.prop("checked", false);

	var conflictExplanation = $("#" + selectedQualityName + "ConflictExplanation");

	conflictExplanation.show();
	}
	});
	</script>
	</html>