可點擊、拖拽填空題

最近需要寫個填空題。

本項目參考自

https://github.com/alidili/Demos/tree/master/DragFillBlankQuestionDemo

本項目缺點:
不能快速連續動畫,操作不宜過快。否則,會因爲計算等的不準確、不及時性,崩潰
如果快速點擊選項,多個選項做動畫,會出現崩潰問題。

要求:
1、選項隨機分佈在題目下面
2、選項可點擊、拖拽實現填空

細化需求:
1、選項在題目下方,隨機分佈,但是不可重疊,所以,需要將“選項區域”劃分,根據選項個數劃分,每個小區域展示一個選項,避免選項重疊

2、用戶可以點擊某個選項,點擊後,自動移動到 還沒有填入內容 的空格處。如果所有空格都被填充了答案,則,點擊某個選項後,自動移動到最後一個空格處,替換最後這個空格上的內容

3、用戶可以拖拽某個選項滑動,擡起手後,如果擡起位置在某個空格處,填充(如果之前已經有內容了,就替換);如果擡起位置不是任何一個空格處,做迴歸動畫,回到選項的初始位置

4、手指按下處,如果是某個空格處,且這個空格上已經有了答案,就把這個答案提取出來,以“選項”樣式隨着手指做移動。當手指鬆開、擡起後:1、如果在某個空格處,填充或替換已有內容;2、如果不在任何空格處,做迴歸動畫,將選項移動到初始位置,之前按下的空格,回覆到“未填寫”狀態

項目GitHub地址

項目結構介紹:
在這裏插入圖片描述
打對號的,是核心文件。打叉號的,是輔助文件。用於幫助理解的。

我比較喜歡“黃帝內經-素問”中的一段話,就用它來做題目了。

分享給大家:
昔在黃帝,生而神靈,弱而能言,幼而徇齊,長而敦敏,成而登天。
乃問於天師曰:餘聞上古之人,春秋皆度百歲,而動作不衰;今時之人,年半百而動作皆衰者。時世異耶人將失之耶?
岐伯對曰:上古之人?其知道者,法於陰陽,和於術數,食飲有節,起居有常,不妄作勞,故能形與神俱,而盡終其天年,度百歲乃去。
今時之人不然也,以酒爲漿,以妄爲常,醉以入房,以欲竭其精,以耗散其真,不知持滿,不時御神,務快其心,逆於生樂,起居無節,故半百而衰也

取了其中一部分
在這裏插入圖片描述
這是加了輔助線的題目。圖中,4個點圍住的區域,就是“空格區域”。是要填寫答案的地方。

全界面如下:
在這裏插入圖片描述
具體功能,請下載項目運行體驗。這裏不做贅述。相關注釋,在源碼中有說明

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章