Policy Models Tutorial

A documentation about Policy Models web component

Get started now View it on GitHub

Getting started

There are two web components:

The first web component,“Default” web component, is the default interview constructed as follows- multiple choice questions that can be answered by clicking a button that represents the appropriate answer.
The second web component,“Chat” web component, is in the form of a chat where you can answer questions using two ways: the first way is by clicking on a button that represents the appropriate answer. The second way is to type in the text box the appropriate answer number.

How it looks like…

The “Default” web component

defaultInterviewNew

The “Chat” web component

chatInterviewNew

Pay attention

All the following steps are done in your html file.

1. Quick start: Use a Html tag

In the body tag on your html page, add a html tag that called policy-models-default or policy-models-Chat.

In case of policy-models-default it will be like this:

<policy-models-default name="PolicyModels">
    </policy-models-default>

In case of policy-models-chat it will be like this:

<policy-models-chat name="PolicyModels">
    </policy-models-chat>

There is an attribute “name” that specifies the name of the element. In our case it is PolicyModels.

2. Add modelId and versionId

In the html policy-models-default tag or policy-models-chat tag add:

 <div id="modelId> ${modelId} </div>
 <div id="versionId"> ${versionId} </div>

In the ${modelId} you need to write the id of the model of the interview.

In the ${versionId} you need to write the version id of the model of the interview.

How to find the Model ID and the Model Version?

Go to any browser of your choice (can also use the commandline with the command ‘curl’) and type - [serverDomain]/apiInterviewCtrl/models/ . This shall give you a list of all models, their names, Id’s and versions. [serverDomain] is https://policymodelsserver.azurewebsites.net/.

Optional

After modelId and versionId div tags, you have the option to add the following line-

<div id ="internalCheckUp"></div>

This div will make the two web components run an internal test and check if other elements it needs are in place. Namely the ‘connection.js’ file, the ‘textAssets.js’ file and CSS file.

Finally it should look like this -

 <div id="modelId> ${modelId} </div>
 <div id="versionId"> ${versionId} </div>
 <div id ="internalCheckUp"></div>

3. Add Style

In the html policy-models-default tag or policy-models-chat tag add:

 <div id="style"> ${nameOfFile} </div>

In the ${nameOfFile} you need to write the name of the css file that describes the style you want the site to have.

You can find our css files in our GitHub.

Pay Attention! You need to put the css file in the same folder as the html file.

In case of policy-models-default it will be like this: styleDefault.css

    <div id="style">styleDefault.css</div>

In case of policy-models-chat it will be like this: styleChat.css

    <div id="style">styleChat.css</div>

How to write the css file

4. Add 3 Script tags

In the body tag on your html page, after the policy-models-default tag or the policy-models-chat tag, add 3 html tags called script. The src attribute specifies the source of the javascript file. The type attribute specifies the type of the script.

You can find our source files in our GitHub.

Pay Attention! You need to put the js files in the same folder as the html file.

In case of policy-models-default it will be like this: policyModelsDefault.js, connection.js, textAssets.js

    <script type = "module" src="./policyModelsDefault.js"></script>
    <script type = "module" src="./connection.js"></script>
    <script type = "module" src="./textAssets.js"></script>

In case of policy-models-chat it will be like this: policyModelsChat.js, connection.js, textAssets.js

    <script type = "module" src="./policyModelsChat.js"></script>
    <script type = "module" src="./connection.js"></script>
    <script type = "module" src="./textAssets.js"></script>

policyModelsDefault.js or policyModelsChat.js is the source file of the web component itself.
connection.js is a file that is responsible for the connection between the server and the web component. Pay attention! On the connection.js file, you need to change the serverDomain attribute (in line 5) to the domain of the server.
textAssets.js is a file that saves all the contents in variables, like the content inside a button or titles. It is critical to edit this file for the web component to work. For more information, click here.

Finally

After all the steps, the html file should look like this:

In case of policy-models-default it will be like this: indexDefault.html

    <html>
    <body>
        <policy-models-default name="PolicyModels">
            <div id="style">styleDefault.css</div>
            <div id="modelId">1</div>
            <div id="versionId">1</div>
        </policy-models-default>
        <script type = "module" src="./policyModelsDefault.js"></script>
        <script type = "module" src="./connection.js"></script>
        <script type = "module" src="./textAssets.js"></script>
    </body>
    </html>

In case of policy-models-chat it will be like this: indexChat.html

    <html>
    <body>
        <policy-models-chat name="PolicyModels">
            <div id="style">styleChat.css</div>
            <div id="modelId">1</div>
            <div id="versionId">1</div>
        </policy-models-chat>
        <script type = "module" src="policyModelsChat.js"></script>
        <script type = "module" src="./connection.js"></script>
        <script type = "module" src="./textAssets.js"></script>
    </body>
    </html>

You can find our html files in our GitHub —