What could be causing the radio button to not work on a mobile device?

Sodda13 · ‎02-21-2023

I created an online questionnaire that uses Angular.js and Bootstrap to show the questions and responses. Every response is allocated a numerical value which is added up at the conclusion to give a final score.

When viewing the application on an actual mobile device, I am unable to select an answer among the radio buttons. The application performs well on Chrome and Safari (both desktop apps), and simulates well on a variety of mobile screens in Chrome Dev Tools. What steps can I take to debug this issue?

Is Angular.js likely the cause? Perhaps this is a known problem with Bootstrap? How do I troubleshoot and repair?

test.html (Template for each question/answer set)

<div class="container">
    <div class="row">

        <div class="col-sm-12">
            <h1>{{question.text}}</h1>
            <p ng-show="question.subtext">{{question.subtext}}</p>
        </div>
        <div class="col-sm-12">
            <p>Remaining Questions: {{questionsLeft}}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form class="form">
                <div class="form-group">
                    <div class="input-group" ng-repeat="answer in question.answers">
                        <div class="input-group-addon">
                            <input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
                        </div>
                        <label class="form-control">
                            {{answer.text}}
                        </label>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-12">&nbsp;</div>
        <div class="col-sm-3 col-sm-offset-9 text-center">
            <button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
        </div>
    </div>
</div>

index.html

<!DOCTYPE html>
<html ng-app="FreemasonTest">
    <head>
        <title>Are you ready?</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
        <script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="x-javascript/app.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="x-javascript/routes.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="x-javascript/model/AssessmentModel.js"></script>
        <script type="text/javascript" src="x-javascript/questions.js"></script>
        <script type="text/javascript" src="x-javascript/needs.js"></script>
        <script type="text/javascript" src="x-javascript/controllers/TestController.js"></script>
        <script type="text/javascript" src="x-javascript/controllers/ResultsController.js"></script>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
                </div>
            </div>
        </nav>
        <div ng-view></div>
    </body>
</html>