DiscreteChoiceWeb/index.html at main · Ttttao1/DiscreteChoiceWeb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调查问卷</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            font-size: 24px;
            text-align: center;
            margin-bottom: 10px;
            color: #333;
        }

        h2 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #555;
        }

        h3 {
            margin-top: 30px;
            color: #333;
        }

        .el-radio-group {
            margin-top: 10px;
        }

        .el-radio {
            margin-bottom: 15px;
        }

        .button-group {
            text-align: center;
            margin-top: 20px;
        }

        .el-button {
            margin: 0 5px;
        }
    </style>
    <!-- 引入vue框架 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id="app" class="container">
        <h1>同济校园特色绿化措施偏好</h1>
        <h2>项目介绍：这是一个关于环境感知和偏好的调查问卷，旨在收集您的宝贵意见。</h2>
        <h3>4个要素：</h3>
        <p>{{ dimensionsDisplay }}</p>
        <h3>随机从5个要素中抽取一个水平组成情景：</h3>
        <p>{{ listDisplay }}</p>
        <h3>请选出你倾向的答案：</h3>
        <el-radio-group v-model="radio">
            <template v-for="(item, i) in items">
                <el-radio :label="item" :key="i"></el-radio><br>
            </template>
        </el-radio-group>
        <div class="button-group">
            <el-button @click="genTwoItems" size="small" icon="el-icon-refresh">刷新</el-button>
            <el-button type="primary" @click="showResult" size="small" icon="el-icon-check">提交</el-button>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    curQuestion: 0, //待使用
                    radio: '',
                    items: [],
                    selectedDimensions: [],
                    dimensions: [
                        ['（花卉增添）保持现状', '（花卉增添）节点都配置', '（花卉增添）目之所及都有'],
                        ['（绿色立面）为数不多绿色立面', '（绿色立面）不同区域都有', '（绿色立面）路边都有绿色立面'],
                        ['（生态活动）不定期活动', '（生态活动）偶尔定期活动', '（生态活动）经常定期活动'],
                        ['不投入劳动时长', '需要投入劳动时长（0.5小时每月）', '需要投入劳动时长（1小时每月）', '需要投入劳动时长（1.5小时每月）', '需要投入劳动时长（2小时每月）']
                    ],
                }
            },
            computed: {
                // Display the selected dimensions for reference
                dimensionsDisplay() {
                    return this.dimensions.map(d => d.join(', ')).join('; ');
                },
                listDisplay() {
                    return this.selectedDimensions.map(d => d.join(', ')).join('; ');
                }
            },
            mounted() {
                // 页面加载后，先生成一遍两个选项
                this.genTwoItems();
            },
            methods: {
                initRandomDimensions() {
                    this.selectedDimensions = this.dimensions.slice(0).sort(() => Math.random() - 0.5).slice(0, 4);
                },
                // 根据5个维度，生成两组选项
                genTwoItems() {
                    this.initRandomDimensions(); // 初始化随机维度
                    let firstItem = this.selectedDimensions.map(_arr => _arr[Math.floor(Math.random() * _arr.length)]).join(' ');
                    let secondItem = this.selectedDimensions.map(_arr => _arr[Math.floor(Math.random() * _arr.length)]).join(' ');
                    // 从每个维度的数组中抽取第一项作为第三个选项
                    let thirdItem = this.selectedDimensions.map(arr => arr[0]).join(' ');

                    this.items = [firstItem, secondItem, thirdItem];
                },
                showResult() {
                    if (this.radio === '') {
                        alert('请选择一个选项');
                    } else {
                        // 这里可以添加将选项发送到服务器的代码

                        // 提交后重置当前选中的选项
                        this.radio = '';

                        // 重新生成新的选项
                        this.genTwoItems();

                        // 可选: 显示提交成功的消息
                        alert('提交成功，选项已刷新');
                    }
                },
            }
        });
    </script>
</body>

</html>