Community
Technology Blog Posts by Members
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Read only

Create Quiz App with Cloud Foundry Python Buildpack

PriyankaChak
SAP Champion
SAP Champion
‎2024 Mar 03 4:00 PM
1,532

Introduction:

In this blog post, I will explain how to use Business application studio to create a python app in BTP cloud foundry.

Prerequisite:

Tutorial Link: Create an Application with Cloud Foundry Python Buildpack

Setup:

  1. Create a new dev space. dev.png
  2. Create a new project from template of type basic multi-target application.Screenshot 2024-03-03 at 8.30.14 PM.png
  3. Create a directory named 'quizapp' with the structure as below. Screenshot 2024-03-03 at 8.27.31 PM.png
  4. The contents of files are as below. 'manifest.yml' contains the application name.
applications:
- name: QuizApp
  • runtime.txt :
python-3.11.7
  • requirements.txt:
requests~=2.31.0
flask~=3.0.2
gunicorn~=21.2.0​
  • Procfile:
web: gunicorn -b 0.0.0.0:$PORT app:app​
  • app.py:
from flask import Flask, render_template, request
import requests
import random

list_of_questions = []
DB_URL = "https://opentdb.com/api.php"
list_of_options = {
    "Books": 10,
    "Film": 11,
    "Music": 12,
    "Television": 14,
    "Video Games": 15,
    "Comics": 29
}

app = Flask(__name__)


@app.route('/')
def home():
    return render_template('home.html', options=list(list_of_options.keys()))


@app.route('/quiz', methods=['POST'])
def display_quiz():
    selected_option = request.form['choice']
    query_params = {
        "amount": 30,
        "category": list_of_options[selected_option],
        "type": "multiple"
    }
    response = requests.get(url=DB_URL, params=query_params)
    data = response.json()['results']
    random.shuffle(data)
    global list_of_questions
    list_of_questions = []
    list_of_questions = data[:10]
    for ques in list_of_questions:
        options = ques['incorrect_answers']
        options.append(ques['correct_answer'])
        random.shuffle(options)
        ques['options'] = options

    return render_template('quiz.html', questions=list_of_questions)


@app.route('/submit', methods=['POST'])
def submit_quiz():
    score = 0
    for index, ques in enumerate(list_of_questions, start=1):
        user_answer = request.form.get(f"question_{index}")
        correct_answer = ques['correct_answer']
        if user_answer == correct_answer:
            score += 1

    return render_template('result.html', score=score)


if __name__ == "__main__":
    app.run()
​
  • home.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="static/home.css" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <title>Category for Entertainment Quiz</title>
</head>
<body>
 <h1>Do you have a passion for entertainment?</h1>
    <form action="{{url_for('display_quiz')}}" method="post">
        <label for="dropdown">Select a category for Quiz:</label>
        <select id="dropdown" name="choice">
            {% for option in options %}
                <option value="{{ option }}">{{ option }}</option>
            {% endfor %}
        </select>
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>​
  • quiz.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="static/quiz.css" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <title>Entertainment Quiz</title>
</head>
<body>
    <h1>Quiz Questions</h1>
    <form action="{{ url_for('submit_quiz') }}" method="post">
        <ol>
            {% set question_index = namespace(value=1) %}
            {% for ques in questions %}
                <li>
                    <p>{{ loop.index }}. {{ ques['question'] | safe }}</p>
                    <ul>
                        {% for option in ques['options'] %}
                            <li>
                                <label>
                                    <input type="radio" name="question_{{question_index.value}}"  value="{{ option }}">
                                    {{ option | safe}}
                                </label>
                            </li>
                        {% endfor %}
                        {% set question_index.value=question_index.value+1 %}
                    </ul>
                </li>
            {% endfor %}
        </ol>
        <input type="submit" value="Submit">
    </form>
</body>
</html>
​
  • result.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="static/result.css" rel="stylesheet">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <title>Quiz Result</title>
</head>
<body>
    <h1>Quiz Result</h1>
    <div id="result-container">
        <p>Your score is: {{ score }} out of 10</p>
    </div>
</body>
</html>
​
  • For css files, you can style as per your preference.

Deploy

Log in to SAP BTP, Cloud Foundry environment:

cf login

Deploy the application on Cloud Foundry:

cf push

After successful deployment, the application will be visible in dev space.

Screenshot 2024-03-03 at 8.43.23 PM.png

 

Conclusion:

  1. Flask web framework is used along with Jinja2 template. All the html files are inside 'templates' folder and all css/image files are under the 'static' folder.
  2. For quiz question generation, Trivia API is used.
  3. Demo Execution: Video link.

 

Labels