backup.txt

#What do you get?
You will get:
- **index.html**: which is the main interface
- **js folder**: all the core javascript files it needs to run
   - **base_class.js**: this is the base class used for inheritance
   - **caretposition.js**: this is used to get the caret position in the text editor of ACP
   - **jquery-2.0.2.min.js**: this is used for all jquery functionalities
   - **jquery-ui-1.10.3.custom.min.js**: this is used for the dragging and button functionalities
   - **index.min.js**: this is the main core system
   - **module folder**: this is the index.min.js separated to its other core components.
- **data folder**: here you put the data for your tests..
   - **data.json**: This is a **Data JSON File Descriptor** that lists all of articles that will be fed in the system. Each article file is described in this form:
   ```
   {
      type: "text",
      link: "[RELATIVE URL OF THE ARTICLE FILE FROM INDEX.HTML]"
   }
   ```
   Note: Although you can put any number of article files, the system randomizes the files to read... The current setting is 5 random articles will show up for each test.
   - **articles folder**: This is where you can put the articles, currently it has 88 articles.
- **css folder**: for basic ui design.
- **extrajs folder**: here is where you can put your additional javascript files for your logging user behavior
    - **extrajs.json**: same as data.json, This is a **Javascript JSON File Descriptor** that lists all of the extra external javascript files that will be loaded into the system. Each javascript file that will be loaded is described in a JSON format in this form:
    ```
    {
     type: "js",
     link: "[RELATIVE URL OF THE JS FILE FROM INDEX.HTML]"
    }
    ```
    - **defaultlib.js**: An example javascript file that has the basic function libraries on mouse events and logging it on the built-in system recorder
    - **default.js**: An example javascript file that adds event detectors on elements in the system and uses the functions in defaultlib.js

#How to Use?
You can use it as is... or modify the JSON File Descriptors to personalize the system to suit your experimental procedure and logging...

###How to Add articles for testing in the *Data JSON File Descriptor*
If you want to add articles, let's say **new_article.txt**,
and you have put it inside the **article folder** (which is inside the **data folder**), you will need to edit the **data.json** file, which is inside the **data folder**, and add the article as a *javascript object notation data* using this format:
```javascript
{
     type: "text",
     link: "data/artcile/new_article.txt"
}
```
Note: This is given that the article file **new_article.txt** is inside the **article folder** (which is inside the **data folder**)

If you want to create your own **Data JSON File Descriptor**, let's say **new_data.json**,
and you want to put your article in it, you need to edit **new_data.json** (which should also be inside the **data folder**), you have to start the file this way:
```javascript
{
   data: [ LIST OF ARTICLE ]
}
```
This means, if you have two articles that you want to be loaded, let's say **new_article.txt** and **new_article_2.txt**, both insde the **article folder** (which is insde the **data folder**),
then **new_data.json** would look like this:
```javascript
{
   data: [
      {
         type: "text",
         link: "data/artcile/new_article.txt"
      },
      {
         type: "text",
         link: "data/artcile/new_article_2.txt"
      }
   ]
}
```

###Loading A Different *Data JSON File Descriptor*
If you want to access a different **Data JSON File Descriptor**, let's say **new_data.json** (from the example above),
you can type this in your url:
```
localhost/acptest/?data=new_data
```

Note: Please put the **new_data.json** at the **data** folder.

###How to Add your Own Javascript files in the *Javascript JSON File Descriptor*
If you want to add your own javascript file, let's say **new_js.js**,
and you have put it inside the **extrajs folder**, you need to edit the **extrajs.json** inside the **extrajs folder** and add the javascript file as a *javascript object notation data*, using this format:
```javascript
{
     type: "js",
     link: "extrajs/new_js.js"
}
```
Note: This is given that the javascript file **new_js.js** is inside **extrajs folder**.

If you want to create your own **Javascript JSON File Descriptor**, let's say **new_javascript_list.json**,
and you want to put your javascript file in it, you need to edit **new_javascript_list.json** (which should also be inside the **extrajs folder**), you have to start the file this way:
```javascript
{
   data: [ LIST OF JAVASCRIPT FILES ]
}
```
This means, if you have two javascript files that you want to be loaded, let's say **new_js.js** and **new_js_2.js**, both inside the **extrajs folder**,
then **new_javascript_list.json** would look like this:
```javascript
{
   data: [
      {
         type: "js",
         link: "extrajs/new_js.js"
      },
      {
         type: "js",
         link: "extrajs/new_js_2.js"
      }
   ]
}
```

###Loading A Different *Javascript JSON File Descriptor*
If you want to access a different **Javascript JSON File Descriptor** with a different set of javascript files for access,
let's say **new_javascript_list.json** (from the example above), you can type this in your url:
```
localhost/acptest/?jslist=new_javascript_list
```

Note: Please put the **new_javascript_list.json** at the **extrajs folder**

###Recording Logs
To record your logs, put this function in your external extra javascript file that you want to load:
```
log(data)
```
where data is any data you want to record, like the following:
- a javascript data object (make sure you don't save the whole jquery element on this, as it will conflict with JSON stringify later on)
- a string
- an integer, float, number...
- an array of the above

###Getting the Logs
You can get the logs by clicking the **Generate Result** button at the top right corner of the system UI. It will generate a JSON file named **"download"**, which can be read by any text file editor.

Note: It will not create a .txt file extension, so you have to right-click open with a notepad or Notepad++ to read the file)

###How to change the generation of logs?
You can change the generation of logs by creating a function to get the data,
let's say **generateNewLog()**,
and putting this function in your new javascript file,
let's say **new_js.js**,
to use **generateNewLog()** when the **Generate Results** button is clicked:
```
generateResult.change_function(generateNewLog);
```
Note: Make sure that **new_js.js** is added in your **Javascript JSON file descriptor** to be loaded by the system - See **What do you get?-extrajs folder-extrajs.json**

#More Questions
Here are some questions you might ask:

###Why is the *Data/Javascript JSON File Descriptors* not working?
You can try copying and pasting your JSON files into this to validate your syntax: http://jsonlint.com/
You might have missed a comma somewhere, so best to always check before using :)

###Why are my logs named *"download"*, and not *"download.txt"* or *"download.json"* or even *"some_other_file_name.json"*?
It is one of the limitations we had in using Javascript to generate files for download instead of sending it to a server to generate it.
You can modify it and create a different way by creating a new function (see **How to change the generation of logs?**)...
If you are using XAMPP/MAMP, you can send it to a PHP file, named **savefile.php** in your server by putting this code in your external javascript file:
```javascript
var generateNewLog = function() {
   var data = JSON.stringify({"data":logdata}, null, " "); //This creates a JSON string of the logdata
   var res = $.post('savefile.php', {"data": data, "file": "put_your_file_name_here.json"}); // Put your new file name in the file area
}
```
While the php file **savefile.php** would look like this:
```php
if (!isset($_POST["data"])){
	die('No data sent');
}

if (!isset($_POST["file"])){
	die('No filename sent');
}

$somecontent = $_POST["data"];

$File = $_POST["file"];

header("Content-Disposition: attachment; filename=\"" . basename($File) . "\"");
header("Content-Type: application/force-download");
header("Content-Length: " . filesize($File));
header("Connection: close");

echo $somecontent;
```
This will force download your file into a filename called **put_your_file_name_here.json** (as what our example has done).

###Can I modify the core program? (i.e. index.min.js)
Yes you can. Actually, you can change the whole thing to suit your experiment. You can also send us bug trackers and request. Just remember that we have made this only for the assignment,
and has made it to mimic the bare essentials of original testing environment minus the logging procedures so that you can add your own.

###How do I know the elements to be accessed (and logged) in the Interface?
You can use Firefox's Firebug or Chrome Developer Tools

###Has this been tested in IE?
We are sorry, we don't use IE. So we haven't tested this. We recommend Firefox or Chrome, they are better when it comes for developing stuff like these...

###The code is messy...
We know. We just made it in 2 days. We didn't use any much of usual Software Development techniques and rules in doing this. Sorry about that.

###My questions are not here...
As this is currently for class use, ask your professor by email and we would answer it the best we can