From 4853e46633f69e4e9b1476458e3fefacf95b48ab Mon Sep 17 00:00:00 2001
From: Danny Yoo <dyoo@cs.wpi.edu>
Date: Thu, 25 Aug 2011 17:41:14 -0400
Subject: [PATCH] improving the example to show its source

---
 .../attr-animation/attr-animation.rkt         |  2 +-
 web-world/examples/attr-animation/index.html  | 84 +++++++++++++++++++
 2 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/web-world/examples/attr-animation/attr-animation.rkt b/web-world/examples/attr-animation/attr-animation.rkt
index 0da976e..9e4e1bd 100644
--- a/web-world/examples/attr-animation/attr-animation.rkt
+++ b/web-world/examples/attr-animation/attr-animation.rkt
@@ -43,4 +43,4 @@
 (big-bang 0
           (initial-view index.html)
           (on-tick tick)
-          (to-draw draw))
\ No newline at end of file
+          (to-draw draw))
diff --git a/web-world/examples/attr-animation/index.html b/web-world/examples/attr-animation/index.html
index e49d600..fd8256c 100644
--- a/web-world/examples/attr-animation/index.html
+++ b/web-world/examples/attr-animation/index.html
@@ -18,6 +18,90 @@ This should be animating:
 <div class="block" id="8"></div>
 <div class="block" id="9"></div>
 </div>
+
+<hr/>
+
+The program for this is:
+<blockquote>
+<pre>
+#lang planet dyoo/whalesong
+
+(require (planet dyoo/whalesong/resource)
+         (planet dyoo/whalesong/web-world))
+
+(define-resource index.html)
+(define-resource style.css)
+
+(define (tick w v)
+  (modulo (add1 w) 10))
+
+
+;; pick-block: world view -> view
+;; Focus the view on block i.
+(define (pick-block v i)
+  (view-focus v (format "#~a" i)))
+
+
+(define (draw w v)
+  (define v1 (update-view-attr
+              (pick-block v w)
+              "class"
+              "selectedBlock"))
+  (define v2 (update-view-attr
+              (pick-block v1 (modulo (sub1 w) 10))
+              "class"
+              "offsetBlock"))
+  (define v3 (update-view-attr
+              (pick-block v2 (modulo (add1 w) 10))
+              "class"
+              "offsetBlock"))
+  (define v4 (update-view-attr
+              (pick-block v3 (modulo (- w 2) 10))
+                          "class"
+                          "block"))
+  (define v5 (update-view-attr
+              (pick-block v4 (modulo (+ w 2) 10))
+              "class"
+              "block"))
+  v5)
+
+
+(big-bang 0
+          (initial-view index.html)
+          (on-tick tick)
+          (to-draw draw))
+</pre>
+</blockquote>
+
+
+with <tt>style.css</tt>:
+<blockquote>
+<pre>
+.block {
+    width : 80px;
+    height : 10px;
+    background-color : blue;
+    display: inline-block;
+}
+
+.selectedBlock {
+    width : 80px;
+    height : 10px;
+    background-color: navy;
+    display: inline-block;
+}
+
+.offsetBlock {
+    width : 80px;
+    height : 10px;
+    background-color: teal;
+    display: inline-block;
+}
+</pre>
+</blockquote>
+
+
+
 </p>
 </body>
 </html>