A complete survey combining PFM, Open Banking, and Payment features

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comprehensive PFM Research Survey</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body class="bg-gray-50 p-4 md:p-8">
    <div id="app" class="max-w-4xl mx-auto">
        
        <div class="bg-white p-4 rounded-lg shadow-lg mb-4">
            <div class="flex justify-between mb-2">
                <span class="text-sm font-medium">Progress</span>
                <span class="text-sm font-medium">{{ currentSection }}/5</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: (currentSection/5)*100 + '%' }"></div>
            </div>
        </div>

        
        <div class="bg-white p-6 md:p-8 rounded-lg shadow-lg">
            <h1 class="text-2xl font-bold text-gray-800 mb-6">Personal Finance Management (PFM) Research Survey</h1>
            <p class="text-gray-600 mb-8">Estimated completion time: 5-8 minutes</p>

            <form @submit.prevent="submitForm" class="space-y-8">
                
                <div class="flex space-x-2 mb-6">
                    <button 
                        v-for="section in 5" 
                        :key="section"
                        @click="currentSection = section"
                        :class="['px-4 py-2 rounded-md', currentSection === section ? 'bg-blue-600 text-white' : 'bg-gray-200']"
                    >
                        Section {{ section }}
                    </button>
                </div>

                
                <div v-if="currentSection === 1" class="space-y-6">
                    <h2 class="text-xl font-semibold">Basic Information</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">Age Group*</label>
                            <select v-model="form.ageGroup" class="w-full p-2 border rounded-md" required>
                                <option value="">Select age group</option>
                                <option>18-24 years</option>
                                <option>25-34 years</option>
                                <option>35-44 years</option>
                                <option>45-54 years</option>
                                <option>55+ years</option>
                            </select>
                        </div>

                        <div class="space-y-2">
                            <label class="block text-sm font-medium text-gray-700">Occupation Status*</label>
                            <select v-model="form.occupation" class="w-full p-2 border rounded-md" required>
                                <option value="">Select status</option>
                                <option>Employed Full-time</option>
                                <option>Employed Part-time</option>
                                <option>Self-employed</option>
                                <option>Student</option>
                                <option>Retired</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">How frequently do you check your finances?*</label>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <label v-for="freq in ['Daily', 'Weekly', 'Monthly', 'Rarely']" :key="freq" class="flex items-center space-x-2">
                                <input type="radio" v-model="form.checkFrequency" :value="freq" required>
                                <span>{{ freq }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                
                <div v-if="currentSection === 2" class="space-y-6">
                    <h2 class="text-xl font-semibold">Current Financial Management</h2>
                    
                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Current Financial Tools Used (Select all that apply)</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <label v-for="tool in financialTools" :key="tool" class="flex items-center space-x-2">
                                <input type="checkbox" v-model="form.currentTools" :value="tool">
                                <span>{{ tool }}</span>
                            </label>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Main Financial Challenges (Select top 3)</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <label v-for="challenge in financialChallenges" :key="challenge" class="flex items-center space-x-2">
                                <input type="checkbox" v-model="form.challenges" :value="challenge" 
                                       :disabled="form.challenges.length >= 3 && !form.challenges.includes(challenge)">
                                <span>{{ challenge }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                
                <div v-if="currentSection === 3" class="space-y-6">
                    <h2 class="text-xl font-semibold">Open Banking & Account Aggregation</h2>
                    
                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">Are you familiar with Open Banking?*</label>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <label v-for="level in openBankingFamiliarity" :key="level" class="flex items-center space-x-2">
                                <input type="radio" v-model="form.openBankingKnowledge" :value="level" required>
                                <span>{{ level }}</span>
                            </label>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Which accounts would you connect? (Select all that apply)</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <label v-for="account in accountTypes" :key="account" class="flex items-center space-x-2">
                                <input type="checkbox" v-model="form.accountsToConnect" :value="account">
                                <span>{{ account }}</span>
                            </label>
                        </div>
                    </div>
                </div>

                
                <div v-if="currentSection === 4" class="space-y-6">
                    <h2 class="text-xl font-semibold">Payment Features & Preferences</h2>
                    
                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Current Payment Methods (Select all that apply)</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <label v-for="method in paymentMethods" :key="method" class="flex items-center space-x-2">
                                <input type="checkbox" v-model="form.paymentMethods" :value="method">
                                <span>{{ method }}</span>
                            </label>
                        </div>
                    </div>

                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Smart Payment Features Interest</label>
                        <div class="space-y-4">
                            <div v-for="feature in smartFeatures" :key="feature" 
                                 class="flex items-center justify-between bg-white p-3 rounded-md border">
                                <span class="text-sm font-medium">{{ feature }}</span>
                                <div class="flex space-x-4">
                                    <label v-for="n in 5" :key="n" class="flex items-center">
                                        <input type="radio" v-model="form.smartFeatureRatings[feature]" :value="n">
                                        <span class="ml-1">{{ n }}</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                
                <div v-if="currentSection === 5" class="space-y-6">
                    <h2 class="text-xl font-semibold">Future Technologies & Preferences</h2>
                    
                    <div class="space-y-4">
                        <label class="block text-sm font-medium text-gray-700">Interest in Future Technologies (Select all that apply)</label>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <label v-for="tech in futureTech" :key="tech" class="flex items-center space-x-2">
                                <input type="checkbox" v-model="form.futureInterest" :value="tech">
                                <span>{{ tech }}</span>
                            </label>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label class="block text-sm font-medium text-gray-700">Additional Comments</label>
                        <textarea v-model="form.comments" 
                                class="w-full p-2 border rounded-md" 
                                rows="3" 
                                placeholder="Please share any additional thoughts..."></textarea>
                    </div>
                </div>

                
                <div class="flex justify-between pt-6">
                    <button 
                        type="button"
                        @click="previousSection"
                        :disabled="currentSection === 1"
                        class="px-6 py-2 bg-gray-200 rounded-md disabled:opacity-50"
                    >
                        Previous
                    </button>
                    
                    <button 
                        type="button"
                        v-if="currentSection < 5"
                        @click="nextSection"
                        class="px-6 py-2 bg-blue-600 text-white rounded-md"
                    >
                        Next
                    </button>
                    
                    <button 
                        type="submit"
                        v-if="currentSection === 5"
                        class="px-6 py-2 bg-green-600 text-white rounded-md"
                    >
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    currentSection: 1,
                    form: {
                        ageGroup: '',
                        occupation: '',
                        checkFrequency: '',
                        currentTools: [],
                        challenges: [],
                        openBankingKnowledge: '',
                        accountsToConnect: [],
                        paymentMethods: [],
                        smartFeatureRatings: {},
                        futureInterest: [],
                        comments: ''
                    },
                    financialTools: [
                        'Mobile Banking Apps',
                        'Spreadsheets',
                        'Dedicated PFM Apps',
                        'Traditional Paper Methods',
                        'Investment Apps',
                        'Budgeting Apps'
                    ],
                    financialChallenges: [
                        'Tracking Expenses',
                        'Budgeting',
                        'Saving Money',
                        'Investment Decisions',
                        'Debt Management',
                        'Bill Payments'
                    ],
                    openBankingFamiliarity: [
                        'Very Familiar',
                        'Somewhat Familiar',
                        'Not Familiar'
                    ],
                    accountTypes: [
                        'Bank Accounts',
                        'Credit Cards',
                        'Investment Accounts',
                        'Loans/Mortgages',
                        'E-Wallets',
                        'Cryptocurrency Accounts'
                    ],
                    paymentMethods: [
                        'Bank Transfer',
                        'Credit Card',
                        'Debit Card',
                        'Digital Wallets',
                        'Mobile Payment Apps',
                        'Buy Now Pay Later'
                    ],
                    smartFeatures: [
                        'Bill Split Calculator',
                        'Payment Optimization',
                        'Subscription Management',
                        'Bill Negotiation',
                        'Rewards Optimization'
                    ],
                    futureTech: [
                        'Real-time Payments',
                        'Voice-activated Payments',
                        'QR Code Payments',
                        'Cryptocurrency Payments',
                        'Biometric Authorization',
                        'Smart Contract Payments'
                    ]
                }
            },
            methods: {
                nextSection() {
                    if (this.currentSection < 5) {
                        this.currentSection++
                    }
                },
                previousSection() {
                    if (this.currentSection > 1) {
                        this.currentSection--
                    }
                },
                submitForm() {
                    console.log('Form submitted:', this.form)
                    // Add your form submission logic here
                    alert('Thank you for completing the survey!')
                }
            }
        }).mount('#app')
    </script>
</body>
</html>