diff --git a/ci/Makefile b/ci/Makefile
index 69370a9..044d456 100644
--- a/ci/Makefile
+++ b/ci/Makefile
@@ -1,14 +1,20 @@
+echo executing makefile
+
 all: install build-wasm build-web
 
 build-wasm:
+	echo building wasm:
 	wasm-pack build --out-dir ../../demo/pkg/zkif-wasm-zokrates/     ../zkif-wasm-bundles/zkif-wasm-zokrates
 	wasm-pack build --out-dir ../../demo/pkg/zkif-wasm-bulletproofs/ ../zkif-wasm-bundles/zkif-wasm-bulletproofs
 
 build-web:
+	echo build-web:
 	cd ../demo && npm run build
 
 install:
+	echo install:
 	cd ../demo && npm install
 
 web-dev:
+	echo web-dev:
 	cd ../demo && npm run start
diff --git a/ci/script.sh b/ci/script.sh
index 7bca7e8..b5adcfb 100755
--- a/ci/script.sh
+++ b/ci/script.sh
@@ -4,16 +4,19 @@ set +x
 
 echo executing scripit.sh
 
+echo processing bulletproof: checks & tests
 cd ./zkif-wasm-bundles/zkif-wasm-bulletproofs/
 cargo +nightly-2019-06-22 fmt -- --check
 cargo +nightly-2019-06-22 clippy -- -D warnings
 cargo +nightly-2019-06-22 test
 
+echo processing zk-interface wasm example: checks & tests
 cd ../zkif-wasm-example
 cargo +nightly-2019-06-22 fmt -- --check
 cargo +nightly-2019-06-22 clippy -- -D warnings
 cargo +nightly-2019-06-22 test
 
+echo processing zokrates: checks & tests
 cd ../zkif-wasm-zokrates
 cargo +nightly-2019-06-22 fmt -- --check
 cargo +nightly-2019-06-22 clippy -- -D warnings
@@ -22,5 +25,5 @@ cargo +nightly-2019-06-22 test
 cd ../../ci
 make
 cd ../demo
-npm install
-npm run build
\ No newline at end of file
+#npm install
+#npm run build
diff --git a/demo/index.html b/demo/index.html
index 39044fb..da50c16 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -9,7 +9,14 @@
     <!-- Bootstrap core CSS -->
 <link href="bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
+<!-- <link href="font-awesome.min.css" rel="stylesheet" crossorigin="anonymous"> -->
+<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
     <style>
+
+      a:link {
+        color: #17a2b8;
+      }
+
       .bd-placeholder-img {
         font-size: 1.125rem;
         text-anchor: middle;
@@ -67,6 +74,7 @@ <h1 class="display-4 font-weight-normal pb-5">ZkInterface:<br/>ZoKrates ➞ Bull
 
   <!-- <div class="product-device shadow-sm d-none d-md-block"></div> -->
   <!--   <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div> -->
+
 </div>
 
 <div class="position-relative overflow-hidden px-3 px-lg-5 m-lg-3 bg-light">
@@ -147,19 +155,30 @@ <h2 class="display-5">Zero-knowledge Program</h2>
       id="program">
       _
     </code></pre>
-  </div>
+
+    <div class="btn-group btn-block" role="group" aria-label="Basic example">
+        <button type="button" id="computeWitnessBtn" class="btn btn-info btn-lg">&nbsp; Compute Witness &nbsp;<i class="fa fa-chevron-down fa-fw" aria-hidden="true"></i>
+        </button>
+        <button type="button" id="generateConstraintsBtn" class="btn btn-info btn-lg">&nbsp; Generate constraints &nbsp;<i class="fa fa-chevron-right fa-fw" aria-hidden="true"></i>
+        </button>
+      </div>
+
+</div>
 
   <div class="border-dark-q arrow-right my-auto"></div>
 
   <div class="bg-light-q mr-md-3 p-3 p-md-5 overflow-hidden">
-    <div class="text-center mb-3 pb-3">
-      <h2 class="display-5">Prover's View</h2>
-      <p class="lead">A private witness is used to generate a proof.</p>
-    </div>
-    <pre class="code-block bg-dark-q text-white shadow-sm mx-auto"><code
-      id="prover">
-      _
-    </code></pre>
+
+      <div class="text-center mb-3 pb-3">
+          <h2 class="display-5">Constraint System</h2>
+          <p class="lead">
+            The program is compiled into a common R1CS form.
+          </p>
+        </div>
+        <pre class="code-block bg-dark-q text-white shadow-sm mx-auto"><code
+          id="cs">
+          _
+        </code></pre>
   </div>
 </div>
 
@@ -176,16 +195,17 @@ <h2 class="display-5">Prover's View</h2>
 <div class="d-md-flex flex-md-equal w-100 mb-md-3 pl-md-3">
 
   <div class="bg-light-q p-3 p-md-5 overflow-hidden">
-    <div class="text-center mb-3 pb-3">
-      <h2 class="display-5">Constraint System</h2>
-      <p class="lead">
-        The program is compiled into a common R1CS form.
-      </p>
-    </div>
-    <pre class="code-block bg-dark-q text-white shadow-sm mx-auto"><code
-      id="cs">
-      _
-    </code></pre>
+        
+      <div class="text-center mb-3 pb-3">
+          <h2 class="display-5">Prover's View</h2>
+          <p class="lead">A private witness is used to generate a proof.</p>
+        </div>
+        <pre class="code-block bg-dark-q text-white shadow-sm mx-auto"><code
+          id="prover">
+          _
+        </code></pre>
+        <button type="button" id="createProofBtn" class="btn btn-info btn-lg btn-block">Generate proof</button>
+
   </div>
 
   <div class="border-dark-q arrow-right my-auto"></div>
@@ -201,13 +221,14 @@ <h2 class="display-5">Verifier's View</h2>
       </code>
 
 <span id="status"></span></pre>
+<button type="button" id="verifyProofBtn" class="btn btn-info btn-lg btn-block">Verify proof</button>
   </div>
+
 </div>
 
+
 <!-- Separator -->
 <div class="position-relative m-5 p-5"></div>
 
-<!-- <script src="node_modules/jquery/dist/jquery.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
-<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script> -->
-
 </body></html>
+
diff --git a/demo/package-lock.json b/demo/package-lock.json
index 4f7c949..cb2a298 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -2123,7 +2123,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -2144,12 +2145,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2164,17 +2167,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2291,7 +2297,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2303,6 +2310,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2317,6 +2325,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2324,12 +2333,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -2348,6 +2359,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2428,7 +2440,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2440,6 +2453,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2525,7 +2539,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2561,6 +2576,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2580,6 +2596,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2623,12 +2640,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/demo/scripts/index.js b/demo/scripts/index.js
index 0d7954e..96d8489 100644
--- a/demo/scripts/index.js
+++ b/demo/scripts/index.js
@@ -1,52 +1,147 @@
 import * as zkif_zokrates from "../pkg/zkif-wasm-zokrates";
 import * as zkif_bulletproofs from "../pkg/zkif-wasm-bulletproofs";
 
+// global vars:
+var prover_msg, verifier_msg, proof, constraints;
+var x = 3, y = 4;
+
 // Common program.
 let code = `
+    def main(field x, private field y) -> (field):
+        field xx = x * x
+        field yy = y * y
+        return xx + yy - 1
 
-def main(field x, private field y) -> (field):
-    field xx = x * x
-    field yy = y * y
-    return xx + yy - 1
-
-`;
+    `;
+    
 document.getElementById("program").innerText = code.trim();
 
-// Compile the code to ZkInterface constraints with the ZoKrates module.
-let constraints = zkif_zokrates.make_constraint_system(code);
-document.getElementById("cs").innerText = zkif_zokrates.pretty(constraints).trim();
+document.getElementById("generateConstraintsBtn").addEventListener("click", generateConstraints); 
+
+function generateConstraints (){
+    console.log("generateConstraints invoked");
+
+    var programCode = document.getElementById("program").innerText;
+    console.log("programCode, programCode: " + programCode);
+
+    // Compile the code to ZkInterface constraints with the ZoKrates module.
+    constraints = zkif_zokrates.make_constraint_system(programCode);
+    console.log("generated constraints, constraints: " + constraints);
+    document.getElementById("cs").innerText = zkif_zokrates.pretty(constraints).trim();
+
+    console.log("generateConstraints finished");
+}
+
+document.getElementById("computeWitnessBtn").addEventListener("click", computeWitness); 
+
+function computeWitness(){
+    console.log("computeWitness invoked");
+    // Prover's View.
+
+    console.log("input parameter, code: " + code);
+    console.log("x: " + x);
+    console.log("y: " + y);
+
+    // Compute the ZkInterface witness with the ZoKrates module.
+    let res  = zkif_zokrates.make_witness(code, x, y);
+    
+    prover_msg = res.prover_msg;
+    verifier_msg = res.verifier_msg;
+
+    console.log("output parameter, prover_msg: " + prover_msg);
+    console.log("output parameter, verifier_msg: " + verifier_msg);
+
+    // Display.
+    document.getElementById("prover").innerText = `
+    x = ${x}, y = ${y}
+    ${zkif_zokrates.pretty(prover_msg)}
+    `.trim();
+
+    console.log("computeWitness finished");
+}
+
+document.getElementById("createProofBtn").addEventListener("click", createProof); 
+
+function createProof(){
+    console.log("createProof invoked");
+
+    console.log("input parameter constraints value: " + constraints);
+    console.log("input parameter prover_msg value: " + prover_msg);
+
+    if (!constraints) {
+        window.alert("constraints are empty, please generate constraints first.");
+        return;
+    }
+    
+    if (!prover_msg) {
+        window.alert("witness is empty, please compute witness first.");
+        return;
+    }
+
+    // Generate a proof with the Bulletproofs module.
+    proof = zkif_bulletproofs.prove(constraints, prover_msg);
+    console.log("output parameter proof value: " + proof);
+
+    var proofHex =  toHexString(proof);
+    var proofHexSubset = proofHex.substring(0, 20);
+
+    var verifierEle = document.getElementById("verifier");
+    verifierEle.innerText = "Prover:\n";
+    verifierEle.insertAdjacentText("beforeend","Proof created, proof-content=" +  proofHexSubset +"... (" + proof.length + " bytes)\n");
+
+    console.log("createProof finished");
+}
+
+document.getElementById("verifyProofBtn").addEventListener("click", verifyProof); 
+
+function verifyProof(){
+    console.log("computeWitness invoked");
+    console.log("input parameter, verifier_msg: " + verifier_msg);
+    console.log("input parameter, proof: " + proof);
+    console.log("input parameter, constraints: " + constraints);
+
+    if (!verifier_msg) {
+        window.alert("witness is empty, please compute witness first.");
+        return;
+    }
+
+    if (!constraints) {
+        window.alert("constraints are empty, please generate constraints first.");
+        return;
+    }
 
-// Prover's View.
+    if (!proof) {
+        window.alert("proof is empty, please create proof first.");
+        return;
+    }
 
-// Compute the ZkInterface witness with the ZoKrates module.
-let x = 3, y = 4;
-let {prover_msg, verifier_msg} = zkif_zokrates.make_witness(code, x, y);
+    // Prover sends verifier_msg and proof to the verifier.
+    document.getElementById("verifier").insertAdjacentText("beforeend","\nVerify: \
+    " + zkif_zokrates.pretty(verifier_msg) + "\n\
+    Verifying proof (" +proof.length + " bytes)");
 
-// Generate a proof with the Bulletproofs module.
-let proof = zkif_bulletproofs.prove(constraints, prover_msg);
+    // Verify the proof using the Bulletproofs module and the messages.
+    let verif = zkif_bulletproofs.verify(constraints, verifier_msg, proof);
 
-// Display.
-document.getElementById("prover").innerText = `
-x = ${x}, y = ${y}
-${zkif_zokrates.pretty(prover_msg)}
-`.trim();
+    // Display what we verified.
+    function statement(msg) {
+        let public_inputs = zkif_zokrates.parse_verifier_msg(msg);
+        let x = public_inputs[1][0];
+        let zz = public_inputs[2][0];
+        return `${x}^2 + y^2 = ${zz}`;
+    }
 
-// Prover sends verifier_msg and proof to the verifier.
-document.getElementById("verifier").innerText = `
-${zkif_zokrates.pretty(verifier_msg)}
-Verifying proof (${proof.length} bytes)
-`.trim();
+    let status = `The statement is ${verif && "proven" || "NOT proven"}:  ${statement(verifier_msg)}`;
+    document.getElementById("status").innerText = status;
 
-// Verify the proof using the Bulletproofs module and the messages.
-let verif = zkif_bulletproofs.verify(constraints, verifier_msg, proof);
+    console.log("output parameter verif value: " + verif);
+    console.log("output parameter proof value: " + proof);
 
-// Display what we verified.
-function statement(msg) {
-    let public_inputs = zkif_zokrates.parse_verifier_msg(msg);
-    let x = public_inputs[1][0];
-    let zz = public_inputs[2][0];
-    return `${x}^2 + y^2 = ${zz}`
+    console.log("verifyProof finished");
 }
 
-let status = `The statement is ${verif && "proven" || "NOT proven"}:  ${statement(verifier_msg)}`;
-document.getElementById("status").innerText = status;
+function toHexString(byteArray) {
+    return Array.from(byteArray, function(byte) {
+      return ('0' + (byte & 0xFF).toString(16)).slice(-2);
+    }).join('')
+  }
\ No newline at end of file