Troubleshooting Microsoft Surface

This guide will explain how to troubleshoot your Microsoft Surface / Surface Pro if you're not able to write characters on Skritter's canvas.

Chrome

Copy-paste this into the Chrome address bar: chrome://flags/#touch-events
In the drop-down menu that displays Disabled change it to Enabled.
Restart Chrome

If Touch Events API Option Isn't available

Install Tampermonkey at: https://chrome.google.com/webstore/detail/tampermonkey/
Set up this script:

// ==UserScript==
// @name Fix stylus input on Surface
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Also allows you to draw the character with your finger
// @author Me
// @match https://skritter.com/study
// @grant none
// ==/UserScript==
(function() {
"use strict";
var touchHandled;
/**
* Simulate a mouse event based on a corresponding touch event
* @param {Object} event A touch event
* @param {String} simulatedType The corresponding mouse event
*/
function simulateMouseEvent(event, simulatedType) {
// Ignore multi-touch events
if (event.touches.length > 1) {
return;
}
event.preventDefault();
var touch = event.changedTouches[0],
simulatedEvent = document.createEvent("MouseEvents");
// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
simulatedType, // type
true, // bubbles
true, // cancelable
window, // view
1, // detail
touch.screenX, // screenX
touch.screenY, // screenY
touch.clientX, // clientX
touch.clientY, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button
null // relatedTarget
);
// Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
}
var _touchStart = function(event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled) {
return;
}
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, "mouseover");
// Simulate the mousemove event
simulateMouseEvent(event, "mousemove");
// Simulate the mousedown event
simulateMouseEvent(event, "mousedown");
};
var _touchMove = function(event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Interaction was not a click
this._touchMoved = true;
// Simulate the mousemove event
simulateMouseEvent(event, "mousemove");
};
var _touchEnd = function(event) {
// Ignore event if not handled
if (!touchHandled) {
return;
}
// Simulate the mouseup event
simulateMouseEvent(event, "mouseup");
// Simulate the mouseout event
simulateMouseEvent(event, "mouseout");
// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {
// Simulate the click event
simulateMouseEvent(event, "click");
}
// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
};
function addEvent() {
var elem = document.getElementById("input-canvas");
if (!elem) return setTimeout(addEvent, 250);
elem.addEventListener("touchstart", _touchStart);
elem.addEventListener("touchmove", _touchMove);
elem.addEventListener("touchend", _touchEnd);
}
addEvent();
})();

3. Refresh the study page.

After setting up this script in Tapermonkey, you should be able to study using your Microsoft Surface.