Scroll

Create two screen web groups for Desktop and Mobile

Follow
Summary This article describes how to create two screen web groups for Desktop and Mobile in askiadesign by using Javascript.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords screen; group; web; desktop; mobile; script; design; askiadesign

Download the example qex file

First we need to create an open ended variable to detect and store the information if it's a mobile device or not. Then we will add a routing on this open ended variable "Evaluate screen group" to be able to switch from one screen group to another related to the script we will add in the screen group properties.



In Screen mode, create 2 screen group (for instance one named Desktop and one Mobile)



and in the properties of the Desktop one, untick all the target environment and in script put:

??YourOpenEndedVariable?? = "false"



Do the same for the Mobile one but in the script put:

??YourOpenEndedVariable?? = "true"



Now in the detection screen for both screen group, add a label and put this code:

<script type="text/javascript">

var browser = (function () {
	var versionSearchString,
		dataBrowser = (function () {
			return [{
				string: navigator.userAgent,
				subString: "Chrome",
				identity: "Chrome"
			}, {
				string: navigator.userAgent,
				subString: "OmniWeb",
				versionSearch: "OmniWeb/",
				identity: "OmniWeb"
			}, {
				string: navigator.vendor,
				subString: "Apple",
				identity: "Safari",
				versionSearch: "Version"
			}, {
				prop: window.opera,
				identity: "Opera",
				versionSearch: "Version"
			}, {
				string: navigator.vendor,
				subString: "iCab",
				identity: "iCab"
			}, {
				string: navigator.vendor,
				subString: "KDE",
				identity: "Konqueror"
			}, {
				string: navigator.userAgent,
				subString: "Firefox",
				identity: "Firefox"
			}, {
				string: navigator.vendor,
				subString: "Camino",
				identity: "Camino"
			}, {		// for newer Netscapes (6+)
				string: navigator.userAgent,
				subString: "Netscape",
				identity: "Netscape"
			}, {
				string: navigator.userAgent,
				subString: "MSIE",
				identity: "Explorer",
				versionSearch: "MSIE"
			}, {
				string: navigator.userAgent,
				subString: "Gecko",
				identity: "Mozilla",
				versionSearch: "rv"
			}, { // for older Netscapes (4-)
				string: navigator.userAgent,
				subString: "Mozilla",
				identity: "Netscape",
				versionSearch: "Mozilla"
			}];
		}()),
		dataOS = (function () {
			return [{
				string: navigator.platform,
				subString: "Win",
				identity: "Windows"
			}, {
				string: navigator.platform,
				subString: "Mac",
				identity: "Mac"
			}, {
				string: navigator.userAgent,
				subString: "iPhone",
				identity: "iPhone/iPod"
			}, {
				string: navigator.platform,
				subString: "Linux",
				identity: "Linux"
			}];
		}());

	function searchString(data) {
		var i = 0, 
			l = data.length,
			str, prop;

		for (; i < l; i += 1) {
			str = data[i].string;
			prop = data[i].prop;
			versionSearchString = data[i].versionSearch || data[i].identity;
			if (str) {
				if (str.indexOf(data[i].subString) !== -1) {
					return data[i].identity;
				}
			} else if (prop) {
				return data[i].identity;
			}
		}
	}

	function searchVersion(dataString) {
		var index = dataString.indexOf(versionSearchString);
		if (index === -1) {
			return;
		}
		return parseFloat(dataString.substring(index + versionSearchString.length + 1));
	}

	function isMobile() {
		var ua = navigator.userAgent || navigator.vendor || window.opera,
			reName = /android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i,
			reVersion = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i;
		return reName.test(ua) || reVersion.test(ua.substr(0, 4));
	}

	// Public interface
	return {
		browser : searchString(dataBrowser) || "An unknown browser",
		version : searchVersion(navigator.userAgent) || searchVersion(navigator.appVersion) || "an unknown version",
		OS		: searchString(dataOS) || "an unknown OS",
		mobile  : isMobile()
	};
} ());

$(document).ready(function(){

	$('#text').val(browser.mobile);
	
 });
</script>

Finally, in the properties of the open ended text box, add in the Code in cell:

style="display:none;"

And in the Code in control:

id="text"



Note: The open ended variable should be visible to evaluate the script so you can use this variable as introduction variable and the evaluation will be done just after this screen.

Have more questions? Submit a request

Comments