This is how you are going to write your css file!

To design the interview you want to embed, a css file is needed.

In the html file, in the head tag, you need to add the following line for the design.

  <link rel="stylesheet" href= ${nameOfTheCssFile} >

This link tag is a link to an external style sheet.

• In case of the “Default” web component, the default file we provide is styleDefault.css.

• In case of the “Chat” web component, the default file we provide is styleChat.css.

Each file includes names of classes or IDs that express buttons, titles, paragraphs and so on. Each class or ID has its own design. You have the option to use or modify our default file.

Pay attention!

To change the file, the names of the classes or IDs must remain the same and only their design can be changed using css.

“Default” web component

List of name of each button and what it describes:

• Description of the startInterview class that represents a button: Start Interview button opens the interview page.

• Description of the restartBtn class that represents a button: Home button returns to the home page and restarts the interview and data.

• Description of the btnStart class that represents a button: Start button that starts the interview.

• Description of the btn class that represents a button: The answers buttons.

• Description of the btnShowTranscript class that represents a button: Show Transcript button that shows the transcript of the interview.

• Description of the btnRevisitQ class that represents a button: Revisit this question button that revisits a specific question.

• Description of the btnConclusion class that represents a button: Show Conclusion button that opens the conclusion page.

• Description of the btnDownloadTranscript class that represents a button: Download Transcript button that downloads the transcript .

• Description of the backToWelcomePage class that represents a button: Home button that returns to the home page and restarts the interview and data .

• Description of the feedbackBtn class that represents a button: Write Feedback button that opens the feedback input.

• Description of the feedbackSubmitBtn class that represents a button: Submit Feedback button that submits the feedback .

• Description of the btnShowTags class that represents a button: Show Current Tags (intermediate result) button that shows the tags.

• Description of the btnDownloadConclusions class that represents a button: Download Conclusions button that downloads the conclusions.

• Description of the commentSubmitBtn class that represents a button: Submit Personal Comment button that submits the comment .

• Description of the commentBtn class that represents a button: Write Personal Comment button that opens the comment input.

List of name of each class and what it describes:

• Description of the policy-models-default class: This class div contains the whole interview.

• Description of the welcomeContent class: This class paragraph contains the content of the title in the Welcome page.

• Description of the startInterview class: This class div contains the ‘startInterview’ class button Start Interview.

• Description of the grid class: This class div contains the interview in the interview page and it’s in charge of dividing the screen - one side is the side of the interview itself.

• Description of the defaultInterview class: This class div contains the interview itself (the left side of the screen).

• Description of the tags class: This class div contains the ‘divBtnShowTags’ class div and ‘tagsDiv’ class div(the right side of the screen).

• Description of the divBtnShowTags class: This class div contains the ‘btnShowTags’ class button Show Current Tags (intermediate result).

• Description of the tagsDiv class: This class div contains the tags.

• Description of the restartClass class: This class div contains the ‘restartBtn’ class button Home.

• Description of the buttons class: This class div contains the ‘btnStart’ class button Start and the ‘btn’ buttons that each represent an answer.

• Description of the feedbackDiv class: This class div contains the ‘feedbackBtn’ class button Write Feedback.

• Description of the feedbackInputDiv class: This class div contains the ‘inputNameID’ id input and the ‘inputID’ id input.

• Description of the divBtnShowTranscript class: This class div contains the ‘btnShowTranscript’ class button Show Transcript.

• Description of the transcript class: This class div contains the transcript and the ‘btnRevisitQ’ class button Revisit this question .

• Description of the conclusion class: This class div contains the ‘btnConclusion’ class button Show Conclusion.

• Description of the downloadTranscript class: This class div contains the ‘btnDownloadTranscript’ class button Download Transcript.

• Description of the conclusions class: This class div contains the conclusions.

• Description of the downloadConclusions class: This class div contains the ‘btnDownloadConclusions’ class button Download Conclusions.

• Description of the backToHome class: This class div contains the ‘backToWelcomePage’ class button Home.

• Description of the conclusionContent class: This class paragraph contains the content of the title in the Conclusion page.

• Description of the namePolicyModels class: This class paragraph contains the big title that should be PolicyModels.

• Description of the questions class: This class paragraph contains the subheading in the interview page and the questions.

• Description of the transitionToConclusionPageContent class: This class paragraph contains the content that appears after the last question and before going to the conclusions page.

• Description of the commentDiv class: This class div contains the ‘commentBtn’ class button Write Personal Comment.

• Description of the commentInputDiv class: This class div contains the ‘inputCommentID’ id input.

• Description of the rejectionContent class: This class paragraph contains the content of the title in rejection page.

• Description of the rejectionAdvice class: This class paragraph contains the content in rejection page.

List of name of each id and what it describes:

• Description of the mySelect id: describes the menu of languages .

• Description of the transcript-toggle id: describes the button show transcript.

• Description of the inputID id: describes the input in which you write down the feedback .

• Description of the inputNameID id: describes the input in which you write down the name of the person who writes the feedback.

• Description of the inputCommentID id: describes the input in which you write down your comment.

• Description of the internalCheckUp id: describes the div that runs an internal test.

“Chat” web component

List of name of each button and what it describes:

• Description of the startInterviewBtn class that represents a button: Start Interview button opens the interview page.

• Description of the btnShowTags class that represents a button: Show Current Tags (intermediate result) button that shows the tags.

• Description of the restartBtn class that represents a button: Home button returns to the home page and restarts the interview and data.

• Description of the btnDownloadTranscript class that represents a button: Download Transcript button that downloads the transcript .

• Description of the btnRevisitQ class that represents a button: Revisit this question button that revisits a specific question.

• Description of the feedbackBtn class that represents a button: Write Feedback button that opens the feedback input.

• Description of the commentBtn class that represents a button: Write Personal Comment button that opens the comment input.

• Description of the btnConclusion class that represents a button: Show Conclusion button that opens the conclusion page.

• Description of the backToWelcomePage class that represents a button: Home button that returns to the home page and restarts the interview and data .

• Description of the btnDownloadConclusions class that represents a button: Download Conclusions button that downloads the conclusions .

• Description of the feedbackSubmitBtn class that represents a button: Submit Feedback button that submits the feedback .

• Description of the commentSubmitBtn class that represents a button: Submit Personal Comment button that submits the comment .

• Description of the btn class that represents a button: The answers buttons.

• Description of the btnShowTranscript class that represents a button: Show Transcript button that shows the transcript of the interview.

List of name of each class and what it describes:

• Description of the policy-models-chat class: This class div contains the whole interview.

• Description of the welcomeContent class: This class paragraph contains the content of the title in the Welcome page.

• Description of the startInterview class: This class div contains the ‘startInterviewBtn’ class button Start Interview.

• Description of the grid class: This class div contains the interview in the interview page and it’s in charge of dividing the screen - one side is the side of the interview itself.

• Description of the chat class: This class div contains the interview itself (the left side of the screen).

• Description of the restartClass class: This class div contains the ‘restartBtn’ class button Home.

• Description of the divBtnShowTags class: This class div contains the ‘btnShowTags’ class button Show Current Tags (intermediate result).

• Description of the tagsDiv class: This class div contains the tags.

• Description of the downloadTranscript class: This class div contains the ‘btnDownloadTranscript’ class button Download Transcript.

• Description of the inputClass class: This class input contains the input of the answer.

• Description of the conclusion class: This class div contains the ‘btnConclusion’ class button Show Conclusion.

• Description of the boxLeft question class: This class div contains the question bubble.

• Description of the boxRight answer class: This class div contains the answer bubble.

• Description of the feedback class: This class div contains the ‘feedbackBtn’ class button Write Feedback.

• Description of the buttons class: This class div contains the ‘btn’ buttons that each represent an answer .

• Description of the transitionToConclusionPageContent class: This class paragraph contains Contains the content that appears after the last question and before going to the conclusions page.

• Description of the conclusionContent class: This class paragraph contains the content of the title in the Conclusion page.

• Description of the conclusions class: This class div contains the conclusions.

• Description of the downloadConclusions class: This class div contains the ‘btnDownloadConclusions’ class button Download Conclusions.

• Description of the backToHome class: This class div contains the ‘backToWelcomePage’ class button Home.

• Description of the comment class: This class div contains the ‘commentBtn’ class button Write Personal Comment.

• Description of the rejectionContent class: This class paragraph contains the content of the title in rejection page.

• Description of the rejectionAdvice class: This class paragraph contains the content in rejection page.

• Description of the divBtnShowTranscript class: This class div contains the ‘btnShowTranscript’ class button Show Transcript.

• Description of the transcript class: This class div contains the transcript.

List of name of each id and what it describes:

• Description of the mySelect id: describes the menu of languages .

• Description of the transcript-toggle id: describes the button show transcript.

• Description of the inputID id: describes the input in which you write down the number of your answer to the question in the interview.

• Description of the inputFeedbackID id: describes the input in which you write down your feedback.

• Description of the inputFeedbacNameID id: describes the input in which you write down the name of the person who writes the feedback.

• Description of the inputCommentID id: describes the input in which you write down your comment.

• Description of the internalCheckUp id: describes the div that runs an internal test .

Note

In both web components, Default and Chat web components, in our html files there are link tags.

The <link rel="stylesheet" href="styleDefault.css"> (in case of Default web component) or <link rel="stylesheet" href="styleChat.css"> (in case of Chat web component) link tag is a link to an external style sheet.

The other link tags are necessary for the font of the text of the interview.

All this files you can find in our GitHub.

Pay Attention

All content, like the content inside a button or titles, is saved in attributes in a class called TextAssets.js. An explanation of each variable can be found here.