Metatorial Services, inc.

Tools used

• HTML • CSS • Javascript • jQuery • Bootstrap • Gimp

My contribution

This site was made from scratch to highlight the learning systems development from a long time teacher and business owner in the field of information technology. I designed a responsive template system for the content from his old sit, utilizing fontAwesome icons and custom flex components. This system takes advantage of AJAX technologies, reducing the amount of code to be loaded when you switch pages. Additionally, I filmed and editted an intro video for new visitors who don't know Bob.

Visit Site »

Highlighted design elements

Main Flow-chart Background Image

I designed a background for my client's site by taking a flow chart that he used to teach his students with, and coloring the different cells with the colors in his logo. Together, the images create a relational effect.

Highlighted Code

Query string redirect code

I created a javascript system which reads query string parameters, and uses AJAX to display them in the site's main page wrapper, and the url of the new page is subsequently updated. The system automatically creates new pages, given an iframe url, which is inserted into a template, and displayed in the page wrapper.


    //variable needed in order to listen for query string variables
        var startURL = window.location.href;
        var exceptedQueryVars = ["pageName"];

function queryStringRedirect(){	

    //check if query string is present
    if(startURL.indexOf("?") > -1){
            var	currURL = startURL;
                queryString = currURL.split("?"),
                queryStringSepVals = queryString[1].split("&");
                for(i = 0; i < queryStringSepVals.length; i++){
                    var currQueryKeyValPair = queryStringSepVals[i].split("="),
                //check if queryString[1] exists	
                        if(currQueryKeyValPair[0] && currQueryKeyValPair[1]){
                            currQueryKey = currQueryKeyValPair[0];
                            currQueryVal = currQueryKeyValPair[1];
                            //set currQueryVal to a blank str
                            currQueryVal = startURL + "?pageName" + "=" + "home";
                //check if pageName var was included in query string
                    if(Object.values(exceptedQueryVars).indexOf(currQueryKey) > -1){
                        //set query string to ?pageName=home
                            window.history.pushState("", "Home - Metatorial Serivices, inc.", startURL + "?pageName" + "=" + "home");
                            document.location.href = startURL + "?pageName" + "=" + "home";
            //page does not have a query string 
            //set page to home
                    //edit url without reload if option available, else reload
                    window.history.pushState("", "Home - Metatorial Serivices, inc.", startURL + "?pageName" + "=" + "home");
                    document.location.href = startURL + "?pageName" + "=" + "home";
function loadPageInfo(pageTitle){
    //default case template var overwrites
        var caseId = -1;
        var pageId = pageInfoJson.iframeTemplate.pageId,
            pagePath = pageInfoJson.iframeTemplate.pagePath,
            pageType = pageInfoJson.iframeTemplate.pageType,
            leadHTML = pageInfoJson.iframeTemplate.leadHTML,
            iframeURL = pageInfoJson.iframeTemplate.iframeURL,
            targetLocation = pageInfoJson.iframeTemplate.targetLocation,
            iframeHTML = 
                '<div class="html-content-page iframe-template">' +
                '<p>Default template html remains, ooh no, did it not change in the big switch statement? Please let the site owner know there is a problem!</p>' +
    //handle full page content cases first
        case "home":
            //console.log("queryString read - home");
                caseID	 = 0;
                pageId   = pageInfoJson.home.pageId;
                pagePath = pageInfoJson.home.pagePath;
                pageType = pageInfoJson.home.pageType;
                leadHTML = pageInfoJson.home.leadHTML;

        //(removed other cases, to demonstrate code for, 
        //however you can follow  this template for any other pages you want.
        if(pageType == "iframeTemplate"){
            //default case - iframe load in
            //console.log("pageId inside iframeTemplate post switch conditional: " + pageId);
            for(i = 0; i <= countJsonKeys(templateInfoJson); i++){
                if(pageInfoJson.iframeTemplate.pageId == templateInfoJson[templateInfoJsonIndex[i]].pageId){
                    //set local pageId from templateInfoJson
                        pageId = templateInfoJson[templateInfoJsonIndex[i]].pageId;
                    //set local leadHTML from templateInfoJson
                        leadHTML = templateInfoJson[templateInfoJsonIndex[i]].leadHTML;
                    //set local IframeURL from templateInfoJson
                        iframeURL = templateInfoJson[templateInfoJsonIndex[i]].iframeURL;
                    //set local targetLocation from templateInfoJson
                        targetLocation = templateInfoJson[templateInfoJsonIndex[i]].targetLocation;
                    console.log("iframe url = " + iframeURL + "\ntarget location = " + targetLocation);
            function buildIframeTemplate(){
                /*add class with iframe page custom class on container inside template html
                    var htmlContentPageCustomClass = templateInfoJson[templateInfoJsonIndex[pageId - countJsonKeys(pageInfoJson)]];
                    iframeHTML = 
                        '<div class="' + 'customClassWillGoHere' + ' iframe-template">' +
                        '<iframe id="template_iframe"  ' +
                        'scrolling="no" src="' + iframeURL + '" '
                    targetLocation = pageInfoJson.iframeTemplate.targetLocation;
                    if(targetLocation !== "#side-content .video-load-container"){
                        $("#main-content .lead").html(leadHTML);
                        iframeHTML +=
                            'style="width:100%; height:800px;" ' +
                            ' allowfullscreen/></div>' ;
                        //youtube video case
                        iframeHTML +=
                            'frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" ' +
                            'style="height:200px; " ' +
                            ' allowfullscreen/></div>' ;
                //console.log($("#main-content .page-load-container").html());
        }else if(pageType == "fullPageContent"){
            //full content of page available
            //console.log("pagetype is fullPageContent - full content available switch");
            //insert data from json case onto master page
            $("#main-content .lead").html(leadHTML);
            $("#main-content .page-load-container").load(pagePath);