diduthink.jarv.org Open in urlscan Pro
188.114.96.3  Public Scan

Form analysis
1 forms found in the DOM

POST /c

<form action="/c" method="post" x-data="feedback">
  <h1 x-text="questionBox()" class="text-center bg-happyYellow font-semibold p-4 md:text-4xl text-3xl rounded-lg ">What did U think?</h1>
  <div class="text-center flex items-center justify-center md:mx-5 mx-2 mt-2">
    <span class="text-7xl opacity-10 font-medium">{</span>
    <div class="font-light text-lg md:mt-5 mt-2 md:mx-4 mx-2"> Create a reaction survey that can be sent with a QR code </div>
    <span class="text-7xl opacity-10 font-medium">}</span>
  </div>
  <div class="italic text-center font-extralight md:text-xl text-sm md:mt-5 mt-2"> Try one of the following examples </div>
  <div class="font-extralight text-center md:text-lg
       text-sm grid grid-cols-2 max-w-fit rounded-md
       mx-auto border border-gray-300 md:mt-4 mt-2">
    <button x-on:click.prevent="toggleExample('How are you feeling?', [&quot;💩&quot;,&quot;💯&quot;,&quot;🤯&quot;,&quot;😴&quot;,&quot;🚀&quot;])" class="border broder-gray-300 hover:bg-gray-200 p-2">How are you feeling?</button>
    <button x-on:click.prevent="toggleExample('What did you think of the presentation?', [&quot;😴&quot;,&quot;😐&quot;,&quot;🙄&quot;,&quot;😍&quot;])" class="border broder-gray-300 hover:bg-gray-200 p-2">What did you think of the
      presentation?</button>
    <button x-on:click.prevent="toggleExample('How well did you understand the material?', [&quot;👍&quot;,&quot;🤯&quot;])" class="border broder-gray-300 hover:bg-gray-200 p-2">How well did you understand the material?</button>
    <button x-on:click.prevent="toggleExample('Was this discussion helpful?', [&quot;👎&quot;,&quot;🤷&quot;,&quot;👍&quot;])" class="border broder-gray-300 hover:bg-gray-200 p-2">Was this discussion helpful?</button>
  </div>
  <div class="italic text-center font-extralight md:text-xl text-sm md:mt-5 mt-2"> .. or write your own question </div>
  <input x-on:keydown.enter.prevent="" x-model="question" type="text" id="question" placeholder="" name="question"
    class="font-light md:mt-5 mt-2 p2 block w-full md:text-lg text-xs border-gray-300 rounded-md shadow-sm focus:ring-happyPurple focus:border-happyPurpleDark">
  <input type="hidden" name="emojis" x-model="inputs.map((e) => e.selected).join(',')" value="😞,😕,😐,😊,😄">
  <div class="italic text-center font-extralight md:text-xl text-sm mt-5 mx-2">
    <span class="font-normal not-italic">💡</span> You can also <span class="underline decoration-1 underline-offset-4">customize reactions</span> by selecting them
  </div>
  <div :class="`grid grid-cols-${inputs.length} max-w-fit mx-auto md:mt-4 mt-2`" class="grid grid-cols-5 max-w-fit mx-auto md:mt-4 mt-2">
    <template x-for="(input, index) in inputs" :key="input.selected">
      <button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`" type="button"
        class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer">
        <span x-text="input.selected"></span>
      </button>
    </template><button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`"
      type="button"
      class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      aria-expanded="false" aria-controls="panel-0" id="button-0">
      <span x-text="input.selected">😞</span>
    </button><button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`"
      type="button"
      class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      aria-expanded="false" aria-controls="panel-1" id="button-1">
      <span x-text="input.selected">😕</span>
    </button><button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`"
      type="button"
      class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      aria-expanded="false" aria-controls="panel-2" id="button-2">
      <span x-text="input.selected">😐</span>
    </button><button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`"
      type="button"
      class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      aria-expanded="false" aria-controls="panel-3" id="button-3">
      <span x-text="input.selected">😊</span>
    </button><button x-ref="button" x-on:click="toggle(input)" x-bind:disabled="selectedForPanel != '' &amp;&amp; selectedForPanel != input.selected" :aria-expanded="input.isOpen" :aria-controls="`panel-${index}`" :id="`button-${index}`"
      type="button"
      class="row-start-2 hover:bg-stone-200 disabled:opacity-50 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      aria-expanded="false" aria-controls="panel-4" id="button-4">
      <span x-text="input.selected">😄</span>
    </button>
  </div>
  <template x-for="(input, index) in inputs" :key="input.selected">
    <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl">
      <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
        <span class="filter grayscale opacity-90">❌</span>
      </button>
      <template x-for="(emoji, index) in selections()" :key="index">
        <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
          :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
          <span x-text="emoji"></span>
        </button>
      </template>
    </div>
  </template>
  <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl" id="panel-0" style="display: none;">
    <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
      <span class="filter grayscale opacity-90">❌</span>
    </button>
    <template x-for="(emoji, index) in selections()" :key="index">
      <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
        :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
        <span x-text="emoji"></span>
      </button>
    </template><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-0">
      <span x-text="emoji">💩</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-1">
      <span x-text="emoji">🚀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-2">
      <span x-text="emoji">🎉</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-3">
      <span x-text="emoji">🤯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-4">
      <span x-text="emoji">💀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-5">
      <span x-text="emoji">🔥</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-6">
      <span x-text="emoji">😡</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-7">
      <span x-text="emoji">😍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-8">
      <span x-text="emoji">😴</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-9">
      <span x-text="emoji">😱</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-10">
      <span x-text="emoji">🤗</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-11">
      <span x-text="emoji">😷</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-12">
      <span x-text="emoji">😬</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-13">
      <span x-text="emoji">😳</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-14">
      <span x-text="emoji">😮</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-15">
      <span x-text="emoji">🤔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-16">
      <span x-text="emoji">🙄</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-17">
      <span x-text="emoji">👍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-18">
      <span x-text="emoji">👎</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-19">
      <span x-text="emoji">💯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-20">
      <span x-text="emoji">💔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-21">
      <span x-text="emoji">😭</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-22">
      <span x-text="emoji">😅</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-23">
      <span x-text="emoji">😫</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-24">
      <span x-text="emoji">🤷</span>
    </button>
  </div>
  <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl" id="panel-1" style="display: none;">
    <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
      <span class="filter grayscale opacity-90">❌</span>
    </button>
    <template x-for="(emoji, index) in selections()" :key="index">
      <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
        :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
        <span x-text="emoji"></span>
      </button>
    </template><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-0">
      <span x-text="emoji">💩</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-1">
      <span x-text="emoji">🚀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-2">
      <span x-text="emoji">🎉</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-3">
      <span x-text="emoji">🤯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-4">
      <span x-text="emoji">💀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-5">
      <span x-text="emoji">🔥</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-6">
      <span x-text="emoji">😡</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-7">
      <span x-text="emoji">😍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-8">
      <span x-text="emoji">😴</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-9">
      <span x-text="emoji">😱</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-10">
      <span x-text="emoji">🤗</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-11">
      <span x-text="emoji">😷</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-12">
      <span x-text="emoji">😬</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-13">
      <span x-text="emoji">😳</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-14">
      <span x-text="emoji">😮</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-15">
      <span x-text="emoji">🤔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-16">
      <span x-text="emoji">🙄</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-17">
      <span x-text="emoji">👍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-18">
      <span x-text="emoji">👎</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-19">
      <span x-text="emoji">💯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-20">
      <span x-text="emoji">💔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-21">
      <span x-text="emoji">😭</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-22">
      <span x-text="emoji">😅</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-23">
      <span x-text="emoji">😫</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-24">
      <span x-text="emoji">🤷</span>
    </button>
  </div>
  <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl" id="panel-2" style="display: none;">
    <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
      <span class="filter grayscale opacity-90">❌</span>
    </button>
    <template x-for="(emoji, index) in selections()" :key="index">
      <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
        :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
        <span x-text="emoji"></span>
      </button>
    </template><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-0">
      <span x-text="emoji">💩</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-1">
      <span x-text="emoji">🚀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-2">
      <span x-text="emoji">🎉</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-3">
      <span x-text="emoji">🤯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-4">
      <span x-text="emoji">💀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-5">
      <span x-text="emoji">🔥</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-6">
      <span x-text="emoji">😡</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-7">
      <span x-text="emoji">😍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-8">
      <span x-text="emoji">😴</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-9">
      <span x-text="emoji">😱</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-10">
      <span x-text="emoji">🤗</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-11">
      <span x-text="emoji">😷</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-12">
      <span x-text="emoji">😬</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-13">
      <span x-text="emoji">😳</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-14">
      <span x-text="emoji">😮</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-15">
      <span x-text="emoji">🤔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-16">
      <span x-text="emoji">🙄</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-17">
      <span x-text="emoji">👍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-18">
      <span x-text="emoji">👎</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-19">
      <span x-text="emoji">💯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-20">
      <span x-text="emoji">💔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-21">
      <span x-text="emoji">😭</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-22">
      <span x-text="emoji">😅</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-23">
      <span x-text="emoji">😫</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-24">
      <span x-text="emoji">🤷</span>
    </button>
  </div>
  <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl" id="panel-3" style="display: none;">
    <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
      <span class="filter grayscale opacity-90">❌</span>
    </button>
    <template x-for="(emoji, index) in selections()" :key="index">
      <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
        :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
        <span x-text="emoji"></span>
      </button>
    </template><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-0">
      <span x-text="emoji">💩</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-1">
      <span x-text="emoji">🚀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-2">
      <span x-text="emoji">🎉</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-3">
      <span x-text="emoji">🤯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-4">
      <span x-text="emoji">💀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-5">
      <span x-text="emoji">🔥</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-6">
      <span x-text="emoji">😡</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-7">
      <span x-text="emoji">😍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-8">
      <span x-text="emoji">😴</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-9">
      <span x-text="emoji">😱</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-10">
      <span x-text="emoji">🤗</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-11">
      <span x-text="emoji">😷</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-12">
      <span x-text="emoji">😬</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-13">
      <span x-text="emoji">😳</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-14">
      <span x-text="emoji">😮</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-15">
      <span x-text="emoji">🤔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-16">
      <span x-text="emoji">🙄</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-17">
      <span x-text="emoji">👍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-18">
      <span x-text="emoji">👎</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-19">
      <span x-text="emoji">💯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-20">
      <span x-text="emoji">💔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-21">
      <span x-text="emoji">😭</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-22">
      <span x-text="emoji">😅</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-23">
      <span x-text="emoji">😫</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-24">
      <span x-text="emoji">🤷</span>
    </button>
  </div>
  <div x-ref="panel" x-show="input.isOpen" x-on:click.outside="closePanel(input)" :id="`panel-${index}`" class="grid grid-cols-5 max-w-fit mx-auto bg-stone-50 p-3 border border-stone-300 rounded-2xl" id="panel-4" style="display: none;">
    <button class="text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-5xl text-3xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-[4px] bg-red-500 cursor-pointer" id="button-trash" x-on:click.prevent="trashInput(input);">
      <span class="filter grayscale opacity-90">❌</span>
    </button>
    <template x-for="(emoji, index) in selections()" :key="index">
      <button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
        :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);">
        <span x-text="emoji"></span>
      </button>
    </template><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-0">
      <span x-text="emoji">💩</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-1">
      <span x-text="emoji">🚀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-2">
      <span x-text="emoji">🎉</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-3">
      <span x-text="emoji">🤯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-4">
      <span x-text="emoji">💀</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-5">
      <span x-text="emoji">🔥</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-6">
      <span x-text="emoji">😡</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-7">
      <span x-text="emoji">😍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-8">
      <span x-text="emoji">😴</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-9">
      <span x-text="emoji">😱</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-10">
      <span x-text="emoji">🤗</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-11">
      <span x-text="emoji">😷</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-12">
      <span x-text="emoji">😬</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-13">
      <span x-text="emoji">😳</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-14">
      <span x-text="emoji">😮</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-15">
      <span x-text="emoji">🤔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-16">
      <span x-text="emoji">🙄</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-17">
      <span x-text="emoji">👍</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-18">
      <span x-text="emoji">👎</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-19">
      <span x-text="emoji">💯</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-20">
      <span x-text="emoji">💔</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-21">
      <span x-text="emoji">😭</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-22">
      <span x-text="emoji">😅</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-23">
      <span x-text="emoji">😫</span>
    </button><button class="hover:bg-stone-200 text-center md:w-[80px] md:h-[80px] w-[55px] h-[55px] md:text-6xl text-4xl rounded-full md:m-1 md:p-2 m-1 p-0 border border-stone-300 shadow-md bg-stone-100 border-2 cursor-pointer"
      :id="`button-select-${index}`" x-on:click.prevent="select(input, emoji);" id="button-select-24">
      <span x-text="emoji">🤷</span>
    </button>
  </div>
  <noscript> Most features on this site will not work without Javascript enabled. Yeah, I know.. :( </noscript>
  <div class="flex mt-4">
    <button type="submit"
      class="w-full bg-happyPurple hover:bg-happyPurpleDark text-white text-xl font-bold py-2 px-4 rounded-full focus:outline-none focus:ring-2 focus:ring-green-400 disabled:text-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
      x-bind:disabled="submitDisabled()">Generate a QR code!</button>
  </div>
</form>

Text Content

WHAT DID U THINK?

{
Create a reaction survey that can be sent with a QR code
}
Try one of the following examples
How are you feeling? What did you think of the presentation? How well did you
understand the material? Was this discussion helpful?
.. or write your own question
💡 You can also customize reactions by selecting them
😞 😕 😐 😊 😄
❌
❌ 💩 🚀 🎉 🤯 💀 🔥 😡 😍 😴 😱 🤗 😷 😬 😳 😮 🤔 🙄 👍 👎 💯 💔 😭 😅 😫 🤷
❌ 💩 🚀 🎉 🤯 💀 🔥 😡 😍 😴 😱 🤗 😷 😬 😳 😮 🤔 🙄 👍 👎 💯 💔 😭 😅 😫 🤷
❌ 💩 🚀 🎉 🤯 💀 🔥 😡 😍 😴 😱 🤗 😷 😬 😳 😮 🤔 🙄 👍 👎 💯 💔 😭 😅 😫 🤷
❌ 💩 🚀 🎉 🤯 💀 🔥 😡 😍 😴 😱 🤗 😷 😬 😳 😮 🤔 🙄 👍 👎 💯 💔 😭 😅 😫 🤷
❌ 💩 🚀 🎉 🤯 💀 🔥 😡 😍 😴 😱 🤗 😷 😬 😳 😮 🤔 🙄 👍 👎 💯 💔 😭 😅 😫 🤷
Most features on this site will not work without Javascript enabled. Yeah, I
know.. :(
Generate a QR code!
made with 🖤 by jarv 📧
privacy/security