examples/example_websockets.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>TheFragebogen: websocket example</title>
        <link rel="stylesheet" type="text/css" href="example.css">

        <script src="../thefragebogen.js"></script>

        <style>
        .websocketConnecting {
            background-color: gray;
            width: 5em;
            height: 5em;
            margin: auto;
            margin-bottom: 2em;
        }

        .websocketConnected {
            background-color: yellow;
            width: 5em;
            height: 5em;
            margin: auto;
            margin-bottom: 2em;
        }

        .websocketReady {
            background-color: green;
            width: 5em;
            height: 5em;
            margin: auto;
            margin-bottom: 2em;
        }

        .websocketReconnecting {
            background-color: #FF00FF;
            width: 5em;
            height: 5em;
            margin: auto;
            margin-bottom: 2em;
        }

        </style>

        <script>
        var screens = [];

        screens.push(new ScreenUIElements(
            new UIElementHTML(undefined, "<h1>TheFragebogen</h1>"),
            new UIElementHTML(undefined, "This demo shows how to communicate via Websockets."),
            new UIElementHTML(undefined, "On the next screen', a message to a WebSocket server is send."),
            new UIElementHTML(undefined, "The questionnaire will be waiting until a correct reply is received ('HelloWorld', delay 2.5s)."),
            new UIElementHTML(undefined, "<i>Important:</i> The websocket echo server must be running on localhost:8080."),
            new UIElementHTML(undefined, "Please start the server <code>node examples/example_websockets_nodejs_server_echo.js</code>."),
            new UIElementHTML(undefined, "NOTE: Server requires <code>npm install ws</code>.")
        ));
        screens.push(new ScreenUIElements(
            new UIElementHTML(undefined, "<h1>QuestionnaireItemWaitWebsocket</h1>"),
            new UIElementHTML(undefined, "On connect, a message is send and reply is delayed by 2.5s."),
            new UIElementHTML(undefined, "This div shows the current connection state with it's background color:"),
            new UIElementHTML(undefined, "<span style='background-color: gray'>gray</span>: connecting<br><span style='background-color: yellow'>yellow</span>: connected and message send<br><span style='background-color: green'>green</span>: got expected reply<br><span style='background-color: #FF00FF'>magenta</span>: lost connection and trying to reconnect"),
            new QuestionnaireItemWaitWebsocket("websocket", "ws://localhost:8080", "HelloWorld", "HelloWorld")
        ));

        var screen = new ScreenUIElements(new UIElementHTML(undefined, "The End."));
        screen.setPaginateUI(null);
        screens.push(screen);

        var screenController = new ScreenController(screens);

        </script>

        <script>
        //Having the start()-function in an extra script-tag makes sure that it will be executed even if there are errors in the script-tag configuring TheFragebogen.
        function start() {
            document.body.innerHTML += "TheFragebogen loaded.";
            if (typeof(screenController) === "undefined") {
                document.body.innerHTML += "<br><i>Something went wrong:</i> Please check that thefragebogen.js was loaded and that the configuration is ok.";
                return;
            }
            screenController.init(document.body);
            screenController.start();
        }

        </script>
    </head>

    <body onload="start()">
        <p>
            TheFragebogen will be shown here.<br> If something fails while starting, an error message will be shown here.
        </p>
    </body>

</html>