網站管理員如何將 Google 表單測驗嵌入網站?

將 Google 表單測驗嵌入你的網站其實非常簡單。無論你是老師要創建評估測驗、培訓師要建立知識檢核,還是人力資源經理要設計員工調查,本指南都將帶你了解所有你需要知道的事項。我們也會順道探索一些強大的替代方案。

目錄

為什麼要嵌入測驗,而不是分享連結?

老實說,點擊一個會讓人離開你網站的連結,感覺就是不對勁。它打斷了流程。你精心設計的網站突然變成了 Google 的通用介面,不知不覺中,一半的訪客可能已經跑去查看他們的電子郵件了。

嵌入則能將一切保留在同一個地方。你的測驗成為網站體驗的一部分,而非事後才想到的。它看起來專業,感覺無縫,最重要的是,能讓你的受眾在你希望的地方保持參與。

從使用者的角度想想。你寧願點擊一個會開啟新分頁(或更糟,直接將你導向別處)的連結,還是向下滾動你正在閱讀的頁面,然後發現測驗就在那裡等著你?答案似乎很明顯。

在網站上嵌入 Google 表單測驗的逐步指南

從 Google 表單獲取嵌入程式碼

這裡就是魔法開始的地方,而且比沖泡你的晨間咖啡還容易。Google 表單將你所需的一切都奉上——你只需要知道去哪裡找。

步驟 1:開啟你的測驗

前往你的 Google 表單測驗。看到右上角那個 傳送 按鈕了嗎?那就是你的入口。點擊它,會彈出一個視窗,裡面有幾個分享選項。

步驟 2:找到嵌入圖示

點擊右上角的三個點圖示以取得嵌入程式碼按鈕。這是 HTML 嵌入圖示,點擊它會顯示 iframe 程式碼,這個程式碼將使你的測驗在網站上活起來。

步驟 3:自訂尺寸

在這裡你可以發揮一點創意。預設的尺寸可能不完美契合你的網站。想要測驗橫跨你內容區域的整個寬度嗎?將寬度值改為 100%。覺得測驗在垂直方向太擠了嗎?把高度提高到 800 甚至 1000 像素。

你的程式碼看起來會像這樣:

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true" width="100%" height="800" frameborder="0">Loading…</iframe>

步驟 4:複製程式碼

一旦你對尺寸滿意,複製整個程式碼片段。你現在可以準備將它貼到你的網站上了。

將測驗添加到不同的網站平台

不同的網站建置工具各有其特點,但在嵌入方面,它們都講同一種語言:HTML。讓我們來分解最受歡迎平台的嵌入過程。

WordPress:內容管理系統的重量級選手

WordPress 驅動了網際網路的很大一部分,這是有充分理由的。以下是嵌入測驗的方法:

編輯你想放置測驗的頁面或文章。在區塊編輯器(也稱為 Gutenberg)中,點擊加號圖示以新增一個區塊。搜尋 自訂 HTML 並選擇它。直接將你的 iframe 程式碼貼入該區塊。點擊發布,就完成了。

WordPress 的美妙之處在於其靈活性——你可以將自訂 HTML 區塊放在內容的任何地方,夾在段落之間,或讓它擁有自己的專屬區段。

純 HTML 網站:老派的方法

使用原始 HTML 工作嗎?這是你的領域。在你最愛的程式碼編輯器中開啟 HTML 檔案,在 <body> 區段中找到你想放置測驗的位置,貼上 iframe 程式碼。儲存檔案,上傳到你的伺服器,一切就緒。

這種方法的直接了當有種令人滿足的感覺。沒有外掛,沒有介面——只有你和程式碼。

Wix、Squarespace 和其他拖放式建置工具

這些平台的宗旨是讓一切視覺化且直觀。在你的編輯器中尋找 嵌入 小工具或 HTML 區塊。將其拖放到你的頁面上,貼上你的 iframe 程式碼,並調整定位到你喜歡的位置。

每個平台對這個功能的名稱略有不同——Wix 稱之為「HTML iframe」,Squarespace 使用「程式碼區塊」——但概念是相同的。

測試與自訂你嵌入的測驗

你已經嵌入了測驗。很好!但請等等——它真的按照你想要的方式運作嗎?

在不同的裝置上開啟你的網站。測驗在你的手機上看起來好嗎?平板電腦呢?如果看起來太擠或被拉伸,回到你的 iframe 程式碼中的寬度和高度值。將寬度設為 100% 通常對響應式設計有奇效,而高度可能需要一些嘗試和錯誤,取決於你的測驗長度。

這裡有一個困擾人們的隱藏問題:如果你的 Google 表單要求使用者使用 Google 帳戶登入,你會失去一些不想驗證的參與者。仔細檢查你的表單設定,確保它設定為允許任何人回覆,而不僅僅是你組織內的人員。

測試實際的測驗參與體驗。自己點擊完成一次。所有問題都正確顯示嗎?可以順利提交嗎?有時當內容從 Google 表單移動到你嵌入的版本時,會出現奇怪的格式問題。

認識 OnlineExamMaker:使用 AI 製作可嵌入的測驗

Google 表單非常適合基本的測驗,但如果你需要更強大的功能呢?如果你要執行高風險評估、追蹤詳細的分析數據,或者只是想對設計和功能有更多控制權呢?

這就是 OnlineExamMaker,一個 AI 驅動的考試創建軟體,將測驗建立提升到新的境界。

這不僅僅是另一個表單建置工具。OnlineExamMaker 專為創建專業考試和測驗而設計,其功能讓 Google 表單看起來像記事本。我們指的是防作弊措施、題庫、隨機化、詳細分析,以及可自訂的品牌設定,讓你的測驗看起來獨一無二。

特別是對教師和培訓師來說,能夠創建具有隨機問題的計時考試可能改變遊戲規則。人力資源經理會欣賞詳細的候選人評估工具以及追蹤各部門完成率的能力。

使用 OnlineExamMaker 中的 AI 創建你的下一個測驗/考試

SAAS,永久免費
100% 數據所有權

使用 OnlineExamMaker 創建並嵌入測驗

這個過程非常直接。首先,你將在 OnlineExamMaker 平台內創建你的考試或測驗。介面很直觀——添加你的問題,設定評分規則,如果需要則配置時間限制,並自訂外觀以符合你的品牌。

一旦你的測驗準備就緒,OnlineExamMaker 會生成一個類似 Google 表單的嵌入程式碼,但提供更多自訂選項。想要控制測驗在你網站內的顯示方式?沒問題。需要追蹤誰參加了測驗以及他們的表現如何?OnlineExamMaker 都為你考慮到了。

關於如何嵌入你的 OnlineExamMaker 測驗的詳細指南,可以在他們的 官方文件 中找到,該文件會一步步帶你完成嵌入過程。你會找到自訂尺寸、選擇彈出式或內嵌式顯示,甚至白標籤化體驗(讓它感覺完全像是你網站原生功能)的選項。

何時應該選擇 OnlineExamMaker 而非 Google 表單?

Google 表單非常適合簡單的回饋表和休閒測驗。但當你需要認證考試、員工評估,或任何安全和詳細報告至關重要的情境時,OnlineExamMaker 就顯現出其優勢了。

試著這樣想它們的區別:Google 表單就像一個友好的街角咖啡館——很適合休閒聚會。OnlineExamMaker 則是專業的會議中心——配備了所有你期望的便利設施,適合處理嚴肅的事務。

嵌入測驗的常見問題與疑難排解技巧

為什麼我的測驗沒有在網站上顯示?

首先,檢查你的網站是否允許 iframe。某些平台或安全性設定會完全封鎖它們。如果是這種情況,你可能只會看到測驗應該出現的地方是一片空白。另外,確保你是將程式碼貼在 HTML 編輯區域,而不是可能會剝離程式碼的富文本編輯器中。

我可以自訂我的 Google 表單測驗在嵌入時的樣貌嗎?

Google 表單在表單內部提供有限的自訂——你可以更改主題顏色和上傳標頭圖片。但嵌入的版本將始終保持 Google 的基本樣式。若想對外觀有更多控制權,像 OnlineExamMaker 這樣的平台提供廣泛的品牌設定選項。

我的嵌入測驗可以參加的人數有限制嗎?

Google 表單本身每個表單最多可以處理 500 萬個回覆,這比大多數人所需還多。限制更可能來自你網站的流量承載能力,而非測驗本身。

如果我想在嵌入後更改測驗怎麼辦?

好消息——你不需要更新嵌入程式碼。你對原始 Google 表單所做的任何更改都會自動反映在嵌入版本中。編輯你的表單,嵌入的測驗就會即時更新。

我的測驗在桌機上看起來很棒,但在手機上很糟糕。怎麼辦?

這通常歸結於那些寬度和高度值。嘗試使用 width=”100%” 以確保它能隨螢幕尺寸縮放。至於高度,你可能需要使用 CSS 中的媒體查詢來針對小螢幕進行調整,或者簡單地設定一個能在所有裝置上運作的合理固定高度。