@@ -17,3 +17,4 @@
 /*.conf
 logs
 imgs
+web-angular

@@ -1,8 +1,43 @@
 # goCaptcha
 captcha server, with own datasets, to train own machine learning AI
 
+### How to use?
+#### Frontend
+Insert this lines in the html file:
+```html
+    <link rel="stylesheet" href="goCaptcha.css">
 
-### How to use?
+    <div id="goCaptcha"></div>
+
+    <script>//define the url where is placed the server of goCaptcha
+        var goCaptchaURL = "http://127.0.0.1:3025";
+    </script>
+    <script src="goCaptcha.js"></script>
+```
+
+It will place the goCaptcha box in the div:
+
+![goCaptcha](https://raw.githubusercontent.com/arnaucode/goCaptcha/master/demo01.png "goCaptcha")
+
+#### Backend
+- Put dataset images in the folder 'imgs'.
+- Run MongoDB.
+- Go to the folder /goCaptcha, and run:
+```
+./goCaptcha
+```
+It will show:
+```
+user@laptop:~/goCaptcha$ ./goCaptcha
+    goCaptcha started
+    dataset read
+    num of dataset categories: 4
+    server running
+    port: 3025
+```
+
+
+### How to make the petitions?
 
 1. Get the captcha:
 ```
@@ -113,6 +148,19 @@ "question" : "leopard"
 }
 ```
 Both models are stored in the MongoDB.
+
+The Captcha Model 'imgs' parameter, are UUIDs generated to set 'random' names to images. The server stores into MongoDB the relation between the 'random' name of each image and the real path of the image:
+```json
+{
+    "captchaid" : "881c6083-0643-4d1c-9987-f8cc5bb9d5b1",
+    "real" : "leopard/image_0092.jpg",
+    "fake" : "1b838c46-b784-471e-b143-48be058c39a7.png"
+}
+```
+When the server recieves a petition to get an image, recieves the petition with the fake image name, then, gets the real path of the image, gets it and serves the image content under the fake image name:
+```
+127.0.0.1:3025/image/1b838c46-b784-471e-b143-48be058c39a7.png
+```
 
 Captcha Model contains the captcha that server returns to the petition. And CaptchaSolution contains the solution of the captcha. Both have the same Id.
 

@@ -0,0 +1,34 @@
+
+.c_blue300{
+    background: #64B5F6!important;
+    color: #ffffff!important;
+}
+.g_button{
+    border: none;
+    border-radius: 2px;
+    position: relative;
+    padding: 8px 30px;
+    margin: 10px 1px;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    will-change: box-shadow, transform;
+    outline: 0;
+    cursor: pointer;
+    text-decoration: none;
+    background: transparent;
+    display: inline-block;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+.g_floatRight{
+    float: right;
+}
+.g_selected{
+    border: 4px solid yellow;
+}
+.g_unselected{
+    border: 4px solid white;
+}

@@ -0,0 +1,66 @@
+
+var selection = [0, 0, 0, 0, 0, 0];
+var captchaid = "";
+
+function httpGet(url) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("GET", url, false); // false for synchronous request
+    xmlHttp.send(null);
+    return xmlHttp.responseText;
+}
+
+function httpPost(url, data) {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open("POST", url, false);
+    xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");
+    xmlHttp.send(data);
+    return xmlHttp.responseText;
+}
+
+function getCaptcha() {
+    data = httpGet(goCaptchaURL + "/captcha")
+    captcha = JSON.parse(data);
+    captchaid = captcha.id;
+    showCaptcha(captcha);
+}
+
+function showCaptcha(captcha) {
+    var html;
+    html = "";
+    html += "<h2>Select all " + captcha.question + "s</h2>";
+    for (k in captcha.imgs) {
+        html += "<img id='" + k + "' onclick='select(this)' src='" + goCaptchaURL + "/image/" + captcha.imgs[k] + "' style='width:150px;' />";
+    }
+    html += "<div onclick='validate()' class='g_button c_blue300 g_floatRight'>Validate</div>";
+    document.getElementById("goCaptcha").innerHTML = html;
+}
+
+function select(elem) {
+    if (selection[elem.id] == 0) {
+        selection[elem.id] = 1;
+        document.getElementById(elem.id).className = "g_selected";
+    } else {
+        selection[elem.id] = 0;
+        document.getElementById(elem.id).className = "g_unselected";
+    }
+}
+
+function validate() {
+    var answer = {
+        selection: selection,
+        captchaid: captcha.id
+    };
+    data = httpPost(goCaptchaURL + "/answer", JSON.stringify(answer));
+    resp = JSON.parse(data);
+    var html = "";
+    if (resp) {
+        html += "<h2>goCaptcha validated</h2>";
+    } else {
+        html += "<h2>goCaptcha failed</h2>";
+    }
+    document.getElementById("goCaptcha").innerHTML = html;
+}
+
+if (document.getElementById("goCaptcha")) {
+    getCaptcha();
+}

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>goCaptcha</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="goCaptcha.css">
+</head>
+<body>
+    <br>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-3"></div>
+            <div class="col-sm-6">
+                <div class="panel panel-default">
+                    <div class="panel-heading c_blue300">
+                        <h3 class="panel-title">goCaptcha</h3>
+                    </div>
+                    <div class="panel-body">
+                        <div id="goCaptcha"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        var goCaptchaURL = "http://127.0.0.1:3025";
+    </script>
+    <script src="goCaptcha.js"></script>
+</body>
+</html>