次は，HTMLタグを使用してボタンを作成します。Pageではデフォルトの「ボタン」がありますが，ボタンの位置等を修正する場合は，HTMLタグをそのまま入力した方が便利です。

0. 前回までのプログラム

以下のように入力してください。

// Text/Instructions
this.options.items.push({
          "type": "text",
           "title": "調査",
           "content": "以下の質問項目をよく読み，あなたにもっとも当てはまる選択肢を選んでください。"
        })

// Multiple choice
const items = [
  'わたしは犬が好きだ', 
  'わたしは猫が好きだ', 
  'わたしは鳥が好きだ', 
  'わたしは馬が好きだ', 
  'わたしは人が好きだ'
];

//各項目と尺度名を配列に格納
var itemsArray = [];
var itemNO;

for(let i = 0; i < items.length; i++){
  itemNO = i + 1;
  itemsArray.push(
    {
      "label": items[i],
      "name": "Q"+itemNO
    }
  )
}

//ランダム順にする場合に並び替え
itemsArray = this.random.shuffle(itemsArray)

for (let i = 0; i < items.length; i++){
itemNO = i+1;
  this.options.items.push({
          "required": true,
          "type": "radio",
          "options": [
            {
              "label": "あてはまらない",
              "coding": "1"
            },
            {
              "label": "ややあてはまらない",
              "coding": "2"
            },
            {
              "label": "どちらでもない",
              "coding": "3"
            },
            {
              "label": "ややあてはまる",
              "coding": "4"
            },
            {
              "label": "あてはまる",
              "coding": "5"
            }
          ],
          "label": itemNO +". "+ itemsArray[i].label,
          "name": itemsArray[i].name,
          "shuffle": false
        })
}

1.「Raw HTML」の表示

以下のように入力してください。「this.options.items.push」で「Page」コンテンツ内に追加することができます。

「type: “html”」でHTMLタグを有効にします。
「content」に以下のように入力してください。

// Raw HTML
this.options.items.push({
          "type": "html",
          "content": "<div class=\\"content-horizontal-center\\"><button>次へ</button></div>"
        })

HTMLタグが使えるので，色々表示できます。

ここまでのコードです。

// Text/Instructions
this.options.items.push({
          "type": "text",
           "title": "調査",
           "content": "以下の質問項目をよく読み，あなたにもっとも当てはまる選択肢を選んでください。"
        })

// Multiple choice
const items = [
  'わたしは犬が好きだ', 
  'わたしは猫が好きだ', 
  'わたしは鳥が好きだ', 
  'わたしは馬が好きだ', 
  'わたしは人が好きだ'
];

//各項目と尺度名を配列に格納
var itemsArray = [];
var itemNO;

for(let i = 0; i < items.length; i++){
  itemNO = i + 1;
  itemsArray.push(
    {
      "label": items[i],
      "name": "Q"+itemNO
    }
  )
}

//ランダム順にする場合に並び替え
itemsArray = this.random.shuffle(itemsArray)

for (let i = 0; i < items.length; i++){
itemNO = i+1;
  this.options.items.push({
          "required": true,
          "type": "radio",
          "options": [
            {
              "label": "あてはまらない",
              "coding": "1"
            },
            {
              "label": "ややあてはまらない",
              "coding": "2"
            },
            {
              "label": "どちらでもない",
              "coding": "3"
            },
            {
              "label": "ややあてはまる",
              "coding": "4"
            },
            {
              "label": "あてはまる",
              "coding": "5"
            }
          ],
          "label": itemNO +". "+ itemsArray[i].label,
          "name": itemsArray[i].name,
          "shuffle": false
        })
}

// Raw HTML
this.options.items.push({
          "type": "html",
          "content": "<div class=\\"content-horizontal-center\\"><button>次へ</button></div>"
        })

以下のように，ページの下部に「次へ」ボタンが表示されます。デフォルトのボタンが表示されたままですが，次のチュートリアルでデフォルトのボタンの操作（非表示の仕方）について説明します。

Untitled