php語言網(wǎng)站實(shí)現(xiàn)英語連線題

用svg做的，不過是直線，沒有限定一對(duì)一，是多對(duì)多的關(guān)系

LZ你好，我想問一下你的前端已經(jīng)實(shí)現(xiàn)了嗎？目前我也遇到該問題了。
實(shí)現(xiàn)的話可以提供前端的小demo參考嗎？

你這玩意需要難點(diǎn)在前端，要用到canvas才能實(shí)現(xiàn)連線

前后端配合去做，數(shù)據(jù)庫保存你的問題答案

如果考慮擴(kuò)展的話，需要將左側(cè)與右側(cè)的選項(xiàng)做成多對(duì)多的。也就是左側(cè)選項(xiàng)可以連到右側(cè)的多選項(xiàng)，反之亦然。比如你可能需要這樣的場(chǎng)景，左側(cè)是水果,家具 這兩個(gè)。右側(cè)是 蘋果，橘子，沙發(fā)，電視 這四個(gè)，數(shù)據(jù)表建立的話，需要一個(gè)問題表，也就是存放左側(cè)的數(shù)據(jù)，至少需要有2個(gè)字段 id,name 分別對(duì)應(yīng)主鍵和名字。然后還需要一張存放右側(cè)數(shù)據(jù)的表，也要有兩個(gè)字段，id，answer 對(duì)應(yīng)主鍵和回答。 左右都存起來了，還需要一張表來建立他倆之間的關(guān)系。第三章表 也 需要有2個(gè)字段，分別 存放左側(cè)數(shù)據(jù)id,以及右側(cè)數(shù)據(jù)id, 這樣一來，兩者建立了對(duì)應(yīng)關(guān)系，剩下的就是對(duì)這三張表的增刪改查。

很明顯需要前端的協(xié)助，而且前端功力要求較高。PHP后端則制定接口規(guī)則。后端的難點(diǎn)主要有兩個(gè)：1.題目如何保存。2.答案如何保存。我想可以用使用JSON保存題目和答案，比如：
{"a":{"caller1","caller2","caller3"},"b":{"cele...","cele...","cele..."}}
答案可以使用字符串保存，如：
1-1,2-2,3-3
然后在前端拼接答案字符串，和數(shù)據(jù)庫中的答案比對(duì)就可以了。
就是這么簡單。
所以還是前端ui比較麻煩一些。

這個(gè)需求很簡單，但需要前端和后端配合，前端完成頁面效果和數(shù)據(jù)上報(bào)，后端驗(yàn)證答案，以及數(shù)據(jù)庫的設(shè)計(jì)。

1.前端

前端需要交互設(shè)計(jì)。

實(shí)現(xiàn)的功能：連線效果，上報(bào)答案

2.后端驗(yàn)證接口

假設(shè)上報(bào)答案的接口地址，http://example.com/answer

POST 方式，至少需要兩個(gè)參數(shù)，subject_id,answer_id，題目id，和選項(xiàng)id

查詢數(shù)據(jù)庫驗(yàn)證答案是否正確。

3.數(shù)據(jù)庫設(shè)計(jì)

題目表：subject

id title answer_id（正確選項(xiàng)id）
1 題目1 1
2 題目2 2
3 題目3 1
4 題目4 5

選項(xiàng)表：answer

id title
1 選項(xiàng)1
2 選項(xiàng)2
3 選項(xiàng)3

有了如上數(shù)據(jù)庫，驗(yàn)證接口，就可以實(shí)現(xiàn)需求了。PS：只是粗略設(shè)計(jì)一下，提供大致思路。

這種需要前端的協(xié)助