Usability Test

Developer
David Lee
Size
6,075 Kb
Views
32,384
  1. Usability Test Previews
  2. Usability Test HTML Codes
  3. Usability Test CSS Codes
  4. Usability Test JS Codes

How do I make an usability test?

What is a usability test? How do you make a usability test? This script and codes were developed by David Lee on 31 July 2022, Sunday.

Usability Test Previews
IQ Test

Usability Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Usability Test</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="full-screen"> <div id="start-button-container"> <div id="start-button"> <div id="start-button-text">Start</div> </div> </div>
</div>
<div id="console-output"> Console Output <br/>
</div>
<div id="configuration-output"> Configuration Output <br/>
</div>
<div id="button-size-output"> Button Size <br/>
</div>
<div id="button-padding-output"> Button Padding <br/>
</div>
<div id="save-button-container"> <div id="save-button" onclick="editConfiguration()"> <div id="save-button-text">Edit Button</div> </div> <div id="cancel-button" onclick="cancelSave()"> <div id="cancel-button-text">X</div> </div>
</div>
<div id="show-touches-container"> <div id="show-touches" onclick="showTouches()"> <div id="show-touches-text">Hide Touches</div> </div>
</div>
<input id="slider2" type="range" min="0.00" max="1" step="0.01" oninput="changePaddingSize(this.value)" onclick="changePaddingSize(this.value)" />
<input id="slider1" type="range" min="0.01" max="1" step="0.01" oninput="changeButtonSize(this.value)" onclick="changeButtonSize(this.value)" />
<div id="button-container-1"> <input type="radio" name="radiogroup" id="radio-1" onclick="toggleRadio()"> <label for="radio-1" id="radio-text-1">Radio button 1</label>
</div>
<div id="button-container-2"> <div> <div id="button-1"> <div id="button-text-1"></div> </div> <div id="button-2"> <div id="button-text-2"></div> </div> <div id="button-3"> <div id="button-text-3"></div> </div> <div id="button-4"> <div id="button-text-4"></div> </div> </div> <div> <div id="button-5"> <div id="button-text-5"></div> </div> <div id="button-6"> <div id="button-text-6"></div> </div> <div id="button-7"> <div id="button-text-7"></div> </div> <div id="button-8"> <div id="button-text-8"></div> </div> </div> <div> <div id="button-9"> <div id="button-text-9"></div> </div> <div id="button-10"> <div id="button-text-10"></div> </div> <div id="button-11"> <div id="button-text-11"></div> </div> <div id="button-12"> <div id="button-text-12"></div> </div> </div> <div> <div id="button-13"> <div id="button-text-13"></div> </div> <div id="button-14"> <div id="button-text-14"></div> </div> <div id="button-15"> <div id="button-text-15"></div> </div> <div id="button-16"> <div id="button-text-16"></div> </div> </div>
</div>
<select multiple id="buttons-enable" onchange="enableButtons()"> <option value="None">None</option> <option value="Number Pad">Number Pad</option> <option value="Radio">Radio</option>
</select> <script src='http://code.jquery.com/jquery-2.1.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Usability Test - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
body { font-family: 'Open Sans', sans-serif;
}
#full-screen { position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;
}
#button-container-1 { position: fixed; left: 0px; top: 0px; display: inline-block; overflow: hidden; white-space: nowrap;
}
#radio-1 { /* Change width and height */ width: 0.4in; height: 0.4in;
}
#radio-text-1 { font-size: 0.4in;
}
#button-container-2 { position: fixed; left: 0px; top: 0px; font-size: 0px;
}
#button-1, #button-2, #button-3, #button-4, #button-5, #button-6, #button-7, #button-8, #button-9, #button-10, #button-11, #button-12,
#button-13, #button-14, #button-15, #button-16 { position: relative; width: 0.5in; height: 0.5in; border: 1px solid LightGrey; display: inline-block; vertical-align: top; margin: 0px;
}
#button-1:active, #button-2:active, #button-3:active, #button-4:active,
#button-5:active, #button-6:active, #button-7:active, #button-8:active,
#button-9:active, #button-10:active, #button-11:active, #button-12:active,
#button-13:active, #button-14:active, #button-15:active, #button-16:active { background-color: grey;
}
#button-text-1, #button-text-2, #button-text-3, #button-text-4,
#button-text-5, #button-text-6, #button-text-7, #button-text-8,
#button-text-9, #button-text-10, #button-text-11, #button-text-12,
#button-text-13, #button-text-14, #button-text-15, #button-text-16 { /*position: absolute; left: 20px; top: 14px;*/ font-size: 16px; text-align: center; vertical-align: middle;
}
#start-button-container { margin: 0;
}
#start-button { position: fixed; left: calc(50% - 0.5in); top: calc(50% - 0.5in); border-radius: 1in; width: 1in; height: 1in; background-color: DarkRed; text-align: center;
}
#start-button-text { padding-top: 34px; color: white;
}
#buttons-enable { /*display: none;*/ position: fixed; left: 200px; bottom: 20px; width: 100px; height: 50px;
}
#save-button-container { position: fixed; bottom: 20px; left: 20px;
}
#save-button { display: inline-block; width: 140px; height: 50px; background-color: lightgrey; text-align: center;
}
#save-button:active { background-color: grey;
}
#save-button-text { padding-top: 14px;
}
#cancel-button { display: none; width: 45px; height: 50px; background-color: lightgrey; text-align: center; margin-left: 0px; padding-left: 0px;
}
#cancel-button:active { background-color: grey;
}
#cancel-button-text { padding-top: 14px;
}
#show-touches-container { /*display: none;*/ position: fixed; bottom: 20px; right: 20px;
}
#show-touches { width: 140px; height: 50px; background-color: lightgrey; text-align: center;
}
#show-touches:active { background-color: grey;
}
#show-touches-text { padding-top: 14px;
}
.touch { position: absolute; width: 10px; height: 10px; background-color: SteelBlue; border: 1px solid SteelBlue; border-radius: 5px; margin-left: -5px; margin-top: -5px;
}
#slider1 { /*display: none;*/ position: fixed; bottom: 100px; width: 100%;
}
#slider2 { /*display: none;*/ position: fixed; bottom: 150px; width: 100%;
}
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid #000000; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */ box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
#console-output { /*display: none;*/ position: fixed; top: 5px; left: 5px; border: 1px solid grey; color: grey; max-height: 30vh; overflow: auto; transition: all 1s ease;
}
#configuration-output { /*display: none;*/ position: fixed; top: 5px; right: 5px; width: 120px; border: 1px solid grey; color: grey;
}
#button-size-output { /*display: none;*/ position: fixed; top: 60px; right: 5px; width: 120px; border: 1px solid grey; color: grey;
}
#button-padding-output { /*display: none;*/ position: fixed; top: 120px; right: 5px; width: 120px; border: 1px solid grey; color: grey;
}
.selected { border: 2px solid red !important;
}

Usability Test - Script Codes JS Codes

$(document).ready(function() { console.log('starting usability app') $('#start-button').bind("touchstart mousedown", clearTouch); $('body').bind("touchstart mousedown", recordTouch); loadConfiguration(); document.querySelector('#full-screen').ontouchmove = function(e) { e.preventDefault(); };
});
var touches = [];
var date = new Date();
var timer = "23:15:01:001";
var startTimer = false;
var startTime = 0; // in milliseconds
var list; // list of touch objects
var hidden = false;
/*
getUTCHours()	Returns the hour, according to universal time (from 0-23)
getUTCMilliseconds()	Returns the milliseconds, according to universal time (from 0-999)
getUTCMinutes()	Returns the minutes, according to universal time (from 0-59)
getUTCMonth()	Returns the month, according to universal time (from 0-11)
getUTCSeconds()
*/
function loadConfiguration() { console.log('loading configuration'); $.get('http://usability-app.herokuapp.com/loadConfiguration', function(data, status) { console.log('Status: ' + status); console.log('Data: '); console.log(data); list = (JSON.parse(data)).items; for (var index in list) { if (list[index].type == 'Radio') { console.log('updating radio button'); // update button position $('#button-container-1').css({ transform: 'translate3d(' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + ',0px)' }); console.log('translate3d(' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + ',0px)'); // update button position display $('#configuration-output').html('Button Position<br/>' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + '<br/>'); // update slider $('#radio-1').css({ width: list[index]['size-x'], height: list[index]['size-y'], 'margin-right': list[index]['padding'] }); $('#radio-text-1').css('font-size', list[index]['size-x']); $('#button-size-output').html('Button Size<br/>' + list[index]['size-x']); $('#slider1').val(parseFloat(list[index]['size-x'])); } else if (list[index].type == 'Button') { console.log('updating regular button'); // update button position $('#button-container-2').css({ transform: 'translate3d(' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + ',0px)' }); console.log('translate3d(' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + ',0px)'); // update button position display $('#configuration-output').html('Button Position<br/>' + list[index]['x-pos'] + ',' + list[index]['y-pos'] + '<br/>'); // update slider $('#button-1, #button-2,#button-3,#button-4,#button-5,#button-6,#button-7,#button-8,#button-9,#button-10,#button-11,#button-12,#button-13,#button-14,#button-15,#button-16').css({ width: list[index]['size-x'], height: list[index]['size-y'], 'margin-right': list[index]['padding'], 'margin-bottom': list[index]['padding'], 'margin-left': list[index]['padding'], 'margin-top': list[index]['padding'] }); //$('#button-text-1').css('font-size', list[index]['size-x']); $('#button-size-output').html('Button Size<br/>' + list[index]['size-x']); $('#button-padding-output').html('Button Padding<br/>' + list[index]['padding']); $('#slider1').val(parseFloat(list[index]['size-x'])); $('#slider2').val(parseFloat(list[index]['padding'])); } } });
}
function editConfiguration() { if ($('#save-button-text').text() == 'Edit Button') { $('#save-button-text').text('Save Position'); $('#button-container').css('border', '1px solid LightBlue'); $('#button-container-2').css('border', '1px solid LightBlue'); $('#cancel-button').css('display', 'inline-block'); $('#slider1,#slider2,#buttons-enable,#show-touches-container,#console-output,#configuration-output,#button-size-output,#button-padding-output').css('display', 'block'); } else { $('#save-button-text').text('Edit Button'); saveConfiguration(); $('#button-container').css('border', 'none'); $('#button-container-2').css('border', 'none'); $('#cancel-button').css('display', 'none'); $('.selected').removeClass('selected'); $('#slider1,#slider2,#buttons-enable,#show-touches-container,#console-output,#configuration-output,#button-size-output,#button-padding-output').css('display', 'none'); }
}
function cancelSave() { $('#save-button-text').text('Edit Button'); $('#button-container').css('border', 'none'); $('#button-container-2').css('border', 'none'); $('#cancel-button').css('display', 'none'); $('.selected').removeClass('selected'); $('#slider1,#slider2,#buttons-enable,#show-touches-container,#console-output,#configuration-output,#button-size-output,#button-padding-output').css('display', 'none');
}
function enableButtons() { var selectedList = $('#buttons-enable').val(); $('#button-container-1').css('display', 'none'); $('#button-container-2').css('display', 'none'); for (var index in selectedList) { if (selectedList[index] == 'None') { $('#button-container-1,#button-container-2').css('display', 'none'); } else if (selectedList[index] == 'Number Pad') { $('#button-container-2').css('display', 'block'); } else if (selectedList[index] == 'Radio') { $('#button-container-1').css('display', 'inline-block'); } }
}
function saveConfiguration() { console.log('saving configuration'); $.post('http://usability-app.herokuapp.com/saveConfiguration', ('result=' + JSON.stringify({ 'items': list })), function(data, status) { console.log('Data: ' + data + '\nStatus: ' + status); }, 'text'); /* $.ajax({ type: 'POST', dataType: 'json', contentType: 'application/json', url: 'http://usability-app.herokuapp.com/saveConfiguration', data: { 'items': list }, success: function(response) { console.log('Save response: ' + response); }, error: function (xhr, status, error) { console.log('Status: ' + status + '\nError: ' + error); } });*/
}
function recordTouch(e) { if (startTimer == false) { return; } var difference = Date.now() - startTime; if (difference < 1) { return; } var touch; var orig = e.originalEvent; var pos = $(this).position(); if (e.type == "touchstart") { touch = { x: orig.changedTouches[0].pageX, y: orig.changedTouches[0].pageY }; } else if (e.type == "mousedown") { touch = { x: orig.pageX, y: orig.pageY }; } var touchDIV = $('<div>') .addClass('touch') .css({ left: touch.x, top: touch.y }); if (hidden == true) { touchDIV.css({ visibility: 'hidden' }); } touchDIV.appendTo('#full-screen'); timer = difference + 's'; touch.time = timer; touches.push(touch); if (touches.length > 0) { $('#console-output').append(touch.x + 'px,' + touch.y + 'px ' + timer + '<br/>'); $('#start-button-text').text('Start'); } startTimer = false;
}
function clearTouch(e) { var touch; var orig = e.originalEvent; var pos = $(this).position(); if (e.type == "touchstart") { touch = { x: orig.changedTouches[0].pageX, y: orig.changedTouches[0].pageY }; } else if (e.type == "mousedown") { touch = { x: orig.pageX, y: orig.pageY }; } //$('.touch').remove(); //touches = []; date = new Date(); timer = date.getUTCHours() + ':' + date.getUTCMinutes() + ':' + date.getUTCSeconds() + ':' + date.getUTCMilliseconds() + ' Start'; startTimer = true; startTime = Date.now(); $('#console-output').html('Console Output<br/>').append(touch.x + 'px,' + touch.y + 'px ' + timer + '<br/>'); $('#start-button-text').text('Touch');
}
function showTouches() { console.log('toggling touches'); if ($('.touch').first().css('visibility') == 'hidden') { $('.touch').css('visibility', 'visible'); hidden = false; $('#show-touches-text').text('Hide Touches'); $('#button-container').css('border', '1px solid LightBlue'); } else { $('.touch').css('visibility', 'hidden'); hidden = true; $('#show-touches-text').text('Show Touches'); $('#button-container').css('border', 'none'); }
}
function changePaddingSize(size) { var selected = $('.selected'); if (selected.attr('id') === 'button-container-1') { $('#radio-1').css({ 'margin-right': size + 'in' }); } else { $('.selected>div>div ').css({ 'margin-right': size + 'in', 'margin-bottom': size + 'in', 'margin-left': size + 'in', 'margin-top': size + 'in' }); } $('#button-padding-output').html('Button Padding<br/>' + size + 'in'); for (var index in list) { if (list[index].name == selected.attr('id')) { //console.log('updating ' + $(this).find('input').attr('id')); list[index]['padding'] = $('#slider2').val() + 'in'; } }
}
function changeButtonSize(size) { var selected = $('.selected'); if (selected.attr('id') === 'button-container-1') { $('#radio-1').css({ width: size + 'in', height: size + 'in', }); } else { $('.selected>div>div ').css({ width: size + 'in', height: size + 'in' }); } $('#button-size-output').html('Button Size<br/>' + size + 'in'); for (var index in list) { if (list[index].name == selected.attr('id')) { //console.log('updating ' + $(this).find('input').attr('id')); list[index]['size-x'] = $('#slider1').val() + 'in'; list[index]['size-y'] = $('#slider1').val() + 'in'; } }
}
function toggleRadio() { console.log('toggling radio button'); //console.log($('input[type="radio"]').attr('checked')); if ($('input[type="radio"]').attr('checked') == 'checked') { $('input[type="radio"]').attr('checked', false); console.log('toggled to false'); } else { $('input[type="radio"]').attr('checked', true); console.log('toggled to true'); }
}
$.fn.draggable = function() { var offset = null; var mouseOffset = null; var mouseDownState = false; var start = function(e) { if ($('#save-button-text').text() == 'Edit Button') { return; } mouseDownState = true; $('.selected').removeClass('selected'); $(this).addClass('selected'); // calculate offset of where you touched the circle (allows you to drag from any part of the circle) var orig = e.originalEvent; var pos = $(this).position(); if (e.type == "touchstart") { offset = { x: orig.changedTouches[0].pageX - pos.left, y: orig.changedTouches[0].pageY - pos.top }; } else if (e.type == "mousedown") { mouseDownState = true; mouseOffset = { x: orig.pageX - pos.left, y: orig.pageY - pos.top }; } for (var index in list) { if (list[index].name == $(this).attr('id')) { $('#slider1').val(parseFloat(list[index]['size-x'])); $('#slider2').val(parseFloat(list[index]['padding'])); $('#button-padding-output').html('Button Padding<br/>' + list[index]['padding']); $('#button-size-output').html('Button Size<br/>' + list[index]['size-x']); } } } // general moved used by both mouse and touch var move = function(e) { e.preventDefault(); if (mouseDownState == false) { return; } var orig = e.originalEvent; // the new circle location is calculated and assigned var newYPos; var newXPos; if (e.type == "touchmove") { newYPos = orig.changedTouches[0].pageY - offset.y; newXPos = orig.changedTouches[0].pageX - offset.x; } else if (e.type == "mousemove") { newYPos = orig.pageY - mouseOffset.y; newXPos = orig.pageX - mouseOffset.x; } newXPos = newXPos.toFixed(2); newYPos = newYPos.toFixed(2); $(this).css({ transform: 'translate3d(' + newXPos + 'px,' + newYPos + 'px,0px)' }); for (var index in list) { if (list[index].name == $(this).attr('id')) { //console.log('updating ' + $(this).attr('id') + ' index: ' + index); list[index]['x-pos'] = newXPos + 'px'; list[index]['y-pos'] = newYPos + 'px'; //console.log(list[index]); } } } // general stop for mouse and touch var stop = function(e) { if (mouseDownState == false) { return; } mouseDownState = false; // prevents the container from being dragged var orig = e.originalEvent; var newYPos; var newXPos; if (e.type == "touchend") { newYPos = orig.changedTouches[0].pageY - offset.y; newXPos = orig.changedTouches[0].pageX - offset.x; } else if (e.type == "mouseup") { newYPos = orig.pageY - mouseOffset.y; newXPos = orig.pageX - mouseOffset.x; } newXPos = newXPos.toFixed(2); newYPos = newYPos.toFixed(2); $(this).css({ transform: 'translate3d(' + newXPos + 'px,' + newYPos + 'px,0px)' }); for (var index in list) { if (list[index].name == $(this).attr('id')) { //console.log('updating ' + $(this).find('input').attr('id')); list[index]['x-pos'] = newXPos + 'px'; list[index]['y-pos'] = newYPos + 'px'; } } $('#configuration-output').html('Button Position<br/>' + newXPos + 'px,' + newYPos + 'px<br/>'); } // add events to each circle this.bind("touchstart mousedown", start); this.bind("touchmove mousemove", move); this.bind("touchend mouseup", stop);
}
$('#button-container-1').draggable();
$('#button-container-2').draggable();
Usability Test - Script Codes
Usability Test - Script Codes
Home Page Home
Developer David Lee
Username OurDailyBread
Uploaded July 31, 2022
Rating 3
Size 6,075 Kb
Views 32,384
Do you need developer help for Usability Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

David Lee (OurDailyBread) Script Codes
Name
Periodic Table
Google 45 Degree Map
Fed360 Invitation Email
Sample Login Screen
Sample Input Dialog
Fed 360
Google 45 Degree Map v0.2
Sample Color Menu 2
IT Road Map Navigation
Random Data Generator
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!