vue 模拟填空题方格输入(一个文字一个方格)

落日映苍穹つ 2022-12-31 01:29 308阅读 0赞

前言:用于APP、H5的答题功能。

  1. 当前题目的数据

    currentQus:{

    1. questionName: "举头望(),低头思()。" //标题
    2. rightKey: "明月,故乡", //答案
    3. userKey:"", //用户输入的答案
    4. blankList:[] //绑定每一个格子的model,用于处理用户输入的答案

    }

  2. 首先根据标题和答案,处理好格子数,以及每一个方格所在位置,绑定到model,用于页面渲染

    / 处理填空题标题 /

    1. handleBlankTile(currentQus) {
    2. const { questionName, rightKey } = currentQus
    3. const nameList = questionName.split('()')
    4. const rightKeys = rightKey ? rightKey.split(',') : []
    5. blankNameList = []
    6. blankList = []
    7. let index = 1
    8. nameList.forEach((el, i) => {
    9. el.split('').map((txt) => {
    10. blankNameList.push({ type: 'txt', content: txt })
    11. })
    12. if (i !== nameList.length - 1) {
    13. const rightTxt = rightKeys[i]
    14. blankNameList.push({
    15. type: 'input',
    16. content: rightTxt.split('').map((item) => {
    17. blankList.push('')
    18. return {
    19. index: index++,
    20. }
    21. }),
    22. })
    23. }
    24. })
    25. return { blankNameList, blankList }
    26. },
    • blankNameList用于标题渲染,blankList的长度等于格子数用于绑定数据([’’,’’,’’,’’,])
    • blankNameList打印结果如下:
      在这里插入图片描述
      将文字也分开是为了进行页面布局、换行
  3. 根据以上处理好的数据来渲染html代码



    {
    { subItem.type !== ‘input’ ? subItem.content : ‘’ }}


  4. 判断用户是要输入还是删除,分以下几种情况

    • 单文字输入直接将焦点转移到下一个输入框
    • 删除将焦点转移到上一个输入框
    • 多文字输入填充
  1. 拿到用户当前输入框所有文字集合数组
  2. 定位是从第几个框开始输入,
  3. 输入的文字字数和当前框到最后一个框的输入框数量的关系,是否超出等
  4. 将焦点放到最后一个文字所在的输入框
  5. 将文字赋值到blankList,更新视图 (不然有bug)
  6. 储存用户输入的答案
  1. /* 填空题输入效果——输入框自动失焦以及转移到下个焦点 */
  2. inputChange(e, iptI) {
  3. this.$nextTick(() => {
  4. const els = document.getElementsByClassName('inputVal')
  5. switch (e.inputType) {
  6. case 'insertText':
  7. case 'insertFromPaste':
  8. const str = els[iptI - 1].value
  9. const strList = str.split('')
  10. const strL = strList.length
  11. const elsL = els.length
  12. // alert(strL)
  13. if (strL > 1) {
  14. strList.map((item, i) => {
  15. if (i < elsL - iptI + 1) {
  16. els[iptI - 1 + i].value = item
  17. this.$set(this.currentQus.blankList, iptI - 1 + i, item)
  18. }
  19. if (i === strL - 1) {
  20. // 字数等于或大于空格数时焦点到最后一个空格
  21. if (strL > elsL - iptI || strL === elsL - iptI) {
  22. els[elsL - 1].focus()
  23. } else {
  24. els[iptI + i].focus()
  25. }
  26. }
  27. })
  28. } else {
  29. if (str !== els.length) {
  30. els[iptI].focus()
  31. }
  32. }
  33. break
  34. case 'deleteContentBackward':
  35. if (iptI > 1) {
  36. els[iptI - 2].focus()
  37. }
  38. break
  39. }
  40. this.getUserKey(this.currentIdx - 1) //保存用户答案
  41. })
  42. },
  1. 储存用户输入的填空题答案

    getUserKey() {

    1. const { type, rightKey } = this.currentQus
    2. // 填空题答案处理
    3. let startIdx = 0
    4. const rightKeys = rightKey.split(',').map((txt) => {
    5. const textLength = txt.length
    6. const str = this.blankList
    7. .slice(startIdx, startIdx + textLength)
    8. .join('')
    9. startIdx += textLength
    10. return str
    11. })
    12. const flag = rightKeys.some((item) => {
    13. return item
    14. }) //是否有作答
    15. this.currentQus.userKey = flag ? rightKeys.join(',') : ''
    16. }
  2. 优化一下标题输入框

    .unit-cell-input {

    1. width: 21px;
    2. height: 21px;
    3. background: #dedee2;
    4. display: inline-block;
    5. margin: 0 4px;
    6. text-align: center;
    7. border: 1px solid transparent;
    8. color: #5050de;
    9. font-weight: 700; &:focus {
    10. border: 1px solid #5656df;
    11. }
    12. }
    13. }
    14. .bank-title {
    15. margin-bottom: 40px;
    16. display: flex;
    17. flex-wrap: wrap;
    18. }

效果图如下

在这里插入图片描述)

发表评论

表情:
评论列表 (有 0 条评论,308人围观)

还没有评论,来说两句吧...

相关阅读

    相关 骨牌铺方格

    Problem Description 在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格,输入n ,输出铺放方案的总数. 例如n=3时,为2× 3方格,骨牌的铺放

    相关 机器人走方格

    M \ N的方格,一个机器人从左上走到右下,只能向右或向下走。有多少种不同的走法?由于方法数量可能很大,只需要输出Mod 10^9 + 7的结果。 Input 第1行,2个

    相关 骨牌铺方格

    1.知识点:递推 2.题意:在2×n的一个长方形方格中,用一个1× 2的骨牌铺满方格(可横铺或竖铺),输入n ,输出铺放方案的总数 3.递推关系方程:a\[i\] =

    相关 方格取数

    题目描述 设有N \\times NN×N的方格图(N \\le 9)(N≤9),我们将其中的某些方格中填入正整数,而其他的方格中则放入数字00。如下图所示(见样例):

    相关 机器人走方格

    有一个X\Y的网格,一个机器人只能走格点且只能向右或向下走,要从左上角走到右下角。请设计一个算法,计算机器人有多少种走法。 给定两个正整数int x,int y,请返回机器人