<commit_before>class CreateMultipleChoiceQuestion extends HTMLElement {
  constructor(questionCommentData) {
    super();

    this.questionCommentData = questionCommentData;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(this.getTemplate());
  }

  getTemplate() {
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 2px 4px;
          margin: 2px;
        }

        .questionCommentInput{
          background-color: inherit;
          color: lightgray;
          border: 1px solid gray;
          width: 100%;
        }

        .removeAnswerButton{
          float: right;
          background: transparent;
          border: none;
          color: white;
          cursor: pointer;
        }

        label{
          padding-right: 10px;
        }

        .questionOuterDiv{
          padding-bottom: 5px;
        }

        .removeAnswerButton::before{
          display: inline-block;
          content: '';
          background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-x-circle-fill' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
          background-repeat: no-repeat;
          height: 1em;
          width: 1.4em;
          border: none;
          margin-right: -2px;
          margin-bottom: -3px;
        }
        
        .removeAnswerButton:hover {
          background-color: grey;
        }

        .checkBoxContent{
          display: flex;
        }
        
        #addAnswerButton{
          background-color: transparent;
          color: white;
          border: none;
          cursor: pointer;
          margin-bottom: 20px;
        }
        #addAnswerButton:hover {
          background-color: gray;
        }
      </style>

      <div class='questionComment'>
        <label>Question</label>
        <div id='commentQuestionContainer'></div>
        
        <label>Answers</label>
        <button id='addAnswerButton' type='button'>
          <svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-plus-circle-fill addQuestionButton' fill='white' xmlns='http://www.w3.org/2000/svg'>
            <path fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/>
          </svg>
          Add Answer
        </button>
        <div id="allAnswersContainer"></div>
        
        <label>Explanation</label>
        <div id="explanationTextContainer"></div>
      </div>
      `;
    return template.content.cloneNode(true);
  }

  connectedCallback() {
    //make the question prompt empty
    const commentQuestionContainer = this.shadowRoot.querySelector('#commentQuestionContainer');
    const commentQuestion = new MultiLineTextInput('Add the question here', '', 100);
    commentQuestion.setAttribute('id', 'commentQuestion');
    commentQuestionContainer.appendChild(commentQuestion);

    //link up the new answer button
    const addAnswerButton = this.shadowRoot.querySelector('#addAnswerButton');
    addAnswerButton.addEventListener('click', event => {
      //used to get the total number of answers
      const allAnswers = this.shadowRoot.querySelectorAll('.questionOuterDiv');
      //add a fresh answer box
      this.addNewAnswerBox('', false, allAnswers.length + 1);
    });

    //an optional explanation of the Q&A
    const explanationTextContainer = this.shadowRoot.querySelector('#explanationTextContainer');
    const explanationText = new MultiLineTextInput('Explain the answer (optional)', '', 100);
    explanationText.setAttribute('id', 'explanationText');
    explanationTextContainer.appendChild(explanationText);
<commit_msg>Small clean up of css<commit_after>class CreateMultipleChoiceQuestion extends HTMLElement {
  constructor(questionCommentData) {
    super();

    this.questionCommentData = questionCommentData;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(this.getTemplate());
  }

  getTemplate() {
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host {
          display: block;
          padding: 2px 4px;
          margin: 2px;
        }

        .questionCommentInput{
          background-color: inherit;
          color: lightgray;
          border: 1px solid gray;
          width: calc(100% - 5px);
        }

        .removeAnswerButton{
          float: right;
          background: transparent;
          border: none;
          color: white;
          cursor: pointer;
        }

        label{
          padding-right: 10px;
        }

        .questionOuterDiv{
          padding-bottom: 5px;
        }

        .removeAnswerButton::before{
          display: inline-block;
          content: '';
          background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' class='bi bi-x-circle-fill' fill='white' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/></svg>");
          background-repeat: no-repeat;
          height: 1em;
          width: 1.4em;
          border: none;
          margin-right: -2px;
          margin-bottom: -3px;
        }
        
        .removeAnswerButton:hover {
          background-color: grey;
        }

        .checkBoxContent{
          display: flex;
        }
        
        #addAnswerButton{
          background-color: transparent;
          color: white;
          border: none;
          cursor: pointer;
          margin-bottom: 20px;
        }
        #addAnswerButton:hover {
          background-color: gray;
        }
      </style>

      <div class='questionComment'>
        <label>Question</label>
        <div id='commentQuestionContainer'></div>
        
        <label>Answers</label>
        <button id='addAnswerButton' type='button'>
          <svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-plus-circle-fill addQuestionButton' fill='white' xmlns='http://www.w3.org/2000/svg'>
            <path fill-rule='evenodd' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/>
          </svg>
          Add Answer
        </button>
        <div id="allAnswersContainer"></div>
        
        <label>Explanation</label>
        <div id="explanationTextContainer"></div>
      </div>
      `;
    return template.content.cloneNode(true);
  }

  connectedCallback() {
    //make the question prompt empty
    const commentQuestionContainer = this.shadowRoot.querySelector('#commentQuestionContainer');
    const commentQuestion = new MultiLineTextInput('Add the question here', '', 100);
    commentQuestion.setAttribute('id', 'commentQuestion');
    commentQuestionContainer.appendChild(commentQuestion);

    //link up the new answer button
    const addAnswerButton = this.shadowRoot.querySelector('#addAnswerButton');
    addAnswerButton.addEventListener('click', event => {
      //used to get the total number of answers
      const allAnswers = this.shadowRoot.querySelectorAll('.questionOuterDiv');
      //add a fresh answer box
      this.addNewAnswerBox('', false, allAnswers.length + 1);
    });

    //an optional explanation of the Q&A
    const explanationTextContainer = this.shadowRoot.querySelector('#explanationTextContainer');
    const explanationText = new MultiLineTextInput('Explain the answer (optional)', '', 75);
    explanationText.setAttribute('id', 'explanationText');
    explanationTextContainer.appendChild(explanationText);

{'fraction_non_alphanumeric': 0.12187227685796091, 'fraction_numerical': 0.05676584090626167, 'mean_word_length': 2.25, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 6}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4221064', 'n_tokens_mistral': 2746, 'n_tokens_neox': 2390, 'n_words': 561}